how to prevent useEffect trigger from the previous screen

Issue

I have 2 screens, on my first screen I have a useEffect which has a watcher on a redux state.

Screen 1

...
useEffect(() => {
  if (props.data) {
    navigation.navigate('To Other Screen');
  }
}, [props.data]);
...

Then on my second Screen. I have a function that will update the redux 'data'. Then, the useEffect on the previous was triggered.

How will I prevent this one. Thank you.

Solution

I found this hoc on the react-nativgation and combine this with useEffect;

https://reactnavigation.org/docs/1.x/with-navigation-focus/

import { withNavigationFocus } from 'react-navigation';

...

const Page = (props) => {

    useEffect(() => {
        if (props.isFocused) {
            // function call;
        }

    }, [props.isFocused]);

};

export default withNavigationFocus(Page);

Answered By - Riku