How to use useFocusEffect hook

Question

As the docs https://reactnavigation.org/docs/en/next/use-focus-effect.html,

"Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc."

I'm trying to use useFocusEffect to fetch data everytime that the user go to that page.

on my component I have a function which dispatch an action with redux to fetch the data:

const fetchData = ()=>{ dispatch(companyJobsFetch(userDetails.companyId)); };

Actually I'm using useEffect hook to call fetchData(), but I'd like to fetch data everytime that the user go to that page and not only when rendered the first time.

It's not clear from the documentation how to use useFocusEffect and I'm not having success on how to do it.

Any help?

Answer 1

The docs show you how to do it. You need to replace API.subscribe with your own thing:

useFocusEffect(
  React.useCallback(() => {
    dispatch(companyJobsFetch(userDetails.companyId));
  }, [dispatch, companyJobsFetch, userDetails.companyId])
);

Answer 2

For version react navigation 4.x, you can use addEvent listener

useEffect(() => {
    if (navigation.isFocused()) {
      resetReviews(); // replace with your function
    }
  }, [navigation.isFocused()]);

OR

useEffect(() => {
    const focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      // Call any action
      _getBusiness({id: business?.id}); // replace with your function
    });
    return () => {
      // clean up event listener
      focusListener.remove();
    };
  }, []);

For later version 5.x, you can use hooks to achieve this

import { useIsFocused } from '@react-navigation/native';

// ...

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}