willFocus event in react navigation 5

Question

I need to fetch data before focus event. I saw that there was an willFocus event in react navigation 4 but it seems that the event was removed in react navigation 5.
componentDidMount cannot do the trick because I want to fetch data as soon as possible even before the screen comes into focus each time the user navigate to my screen.

user_9522406 · Answer

You could do something like:

  /**
   * Your redux action should set loading-state to false after
   * fetch-operation is done...
   */
  reduxActionDoingFetch();

  useEffect(() => {
    if (reduxActionDoingFetch_Loading === false) {
      Navigation.navigate('YourTargetScreen');
    }
  }, [reduxActionDoingFetch_Loading]);

user_1665026 · Answer

You CANNOT fetch data before componentDidMount. That's literally the first thing happens when a new screen is rendered.

Regarding fetching data each time when the screen is focused, you need to use focus event as mentioned in the migration guide: https://reactnavigation.org/docs/upgrading-from-4.x/#navigation-events

The focus event equivalent to willFocus from before. It fires as soon as the screen is focused, before the animation finishes. I'm not sure what you mean by it fires too late.

Also, for data fetching, there is a special hook: useFocusEffect

https://reactnavigation.org/docs/use-focus-effect/

user_6680925 · Answer

React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, [navigation]);

willFocus event in react navigation 5

3 Answers