React Navigation v6: How to detect when screen comes into or out of focus?

Question

In React Navigation v4, you could wrap your component in withNavigationFocus() and then trigger a function using

componentDidUpdate(prevProps) {
  if (!prevProps.isFocused && this.props.isFocused) {
    ...
  }
}

Is there a way to do this in React Navigation v6? All I've seen is that you can use useIsFocused() to detect if the screen is currently focused, but not to detect when it's just come into / out of focus.

Answer 1

Use useFocusEffect to run side-effects when a screen is focused.

The useFocusEffect is analogous to React's useEffect hook. The only difference is that it only runs if the screen is currently focused.

useFocusEffect(
  React.useCallback(() => {
    // Do something when the screen is focused
    return () => {
      // Do something when the screen is unfocused
    };
  }, [])
);