React Native: Didn't rerender the component after data was updated

Question

i have two screens one where the profile information is showing and another screen to edit the information. If i entered the first screen profile it's shows me the right data from the database. Then i move to the next screen where i can change the Information everthing worked so far. But if I go back to the previous screen i still see the old data. So there is no rerendering.

But if i navigate to the other screen that screen fetched the new data. and the call getCurrentUserProfile is executed

This ist the screen with the profile information about the user.

const ProfileScreen = props => {

  const [userObj, setUserObj] = useState({});

  useEffect(() => {
    let mounted = true;
    getCurrentUserProfile().then(user => {
      if (mounted) {
        setUserObj(user);
      }
      console.log(user)
    });
    return () => mounted = false;
  }, []);

  console.log("----b------") // This is only output on the first call
}

How can i fix this. Is there a way when in the database is something changed, so the component rerender and fetches the new data.

Thanks.

Answer 1

You are probably using @react-navigation package. So, if you want to refetch data when come back to the previous page, you can use https://reactnavigation.org/docs/use-is-focused on that “previous” page.

Just look at their docs, you will get the idea.

P.S: Usually we don't unmount components directly. In React Native, we use navigator to mount/unmount components