Not getting updated redux-persist state inside React-navigation useFocusEffect hook

Question

I am using react-navigation(5.6.1) with redux-persist(6.0.0) on my react-native project. One of my reducer is persisted(profile). I added a focus event listener to run some functions when my profile screen in focus.

In those functions, the profile state will be used in some logic. On some other parts of the component, there will be other function that will be dispatching action which will update the profile state.

The issue now is whenever I update the profile state, each time the screen is in focus, I will always get the previous persisted data in the event listener. However, the component always render the latest persisted state. Anybody have any idea why this is happening? Below is the snippet of the event lister.

useFocusEffect(
 React.useCallback(() => {
   console.log(profile);
   dispatch(showErrorDialog());

   return () => {};
  }
}, []),

Answer 1

If you do not give dependencies then useCallback will call the memorised function, not the updated one.

useFocusEffect(
 React.useCallback(() => {
   console.log(profile);
   dispatch(showErrorDialog());

   return () => {};
  }
}, [profile]))