Question is very clear as shown in title and I wonder are there any specific differences between these two different functional implementation with useEffect
?
Here's an example:
const lookAtCameraPermission = async (status: CameraPermissionStatus): Promise<void> => { switch (status) { case 'authorized': setIsCameraAllowed(true); console.log('Camera permission granted.'); break; case 'not-determined': case 'denied': setIsCameraAllowed(false); console.log('Camera permission denied or not determined'); await requestCameraPermission(); break; default: setIsCameraAllowed(false); throw new Error('Unknown camera permission status.'); } }; useEffect(() => { Camera.getCameraPermissionStatus().then(lookAtCameraPermission).catch(console.log); }, [lookAtCameraPermission]);
When trying to implement something like this, ESLint says:The 'lookAtCameraPermission' function makes the dependencies of useEffect Hook (at line 66) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'lookAtCameraPermission' in its own useCallback() Hook.eslintreact-hooks/exhaustive-deps
I preferred to use useCallback
but I couldn't be sure this is the best way to implement this.
Related implementation example: https://github.com/facebook/react/issues/14920