Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Using useCallback vs Moving Function Inside useEffect and Remove Dependency

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>