useFocusEffect

Tags

useFocusEffect

스크린이 focused 됐을 때 스크린 전환 외의 side effect를 추가 시 사용.
  • 이벤트 리스너, 데이터 fetch, 타이틀 수정 등 추가 등록.
  • React의 useEffect hook과 유사하며, 유일한 차이점은 useFocusEffect는 스크린이 현재 focused 됐을 때만 수행된다.
 
import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}