react-native navigation.addListener

react native 메인에서 useEffect 에서 api를 사용할려 하려 하였다.

 useEffect(() => {
 if (token) {
       dispatch(mainDashBoard({token}));
 }

  }, [token]);

하지만 첫 렌더 할때만 실행이 되고 다른 스택으로 넘어가서 돌아올때는 실행이 안된다.

해당 이슈를 찾아 보았는데 아래와 같이

Listening to the 'focus' event with an event listener.
Using the useFocusEffect hook provided by react-navigation.
Using the useIsFocused hook provided by react-navigation.

이런 방법을 제공한다.
따라서

 useEffect(() => {
    const focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      // Call any action
      dispatch(mainDashBoard({token}));
    });
	
  }, [token]);

이런 방식으로 하니까 다른 스택으로 넘어가서 돌아와도 잘 호출이 되는걸 확인이 된다.

하지만 뭔가 잘못된 느낌이 들었다. 이런식으로 해보았는데 a 스택 -> b 스택 -> a 스택-> b 스택 -> a 스택-> b 스택 -> a 스택
이렇게 하니... 콘솔에는 4번이 success로그가 찍혔는데 network 탭에서는 4번이 아닌 무수히 많은 게 찍혔다... 이 이유가 뭔지 보다가 unMount시점에 중지해야한다고 한다.

 useEffect(() => {
    const focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      // Call any action
      dispatch(mainDashBoard({token}));
    });
	return () => focusListener.remove();
  }, [token]);