[React]useFocusEffect

공식문서

useFocusEffect란?

useEffect와 매우 유사하다.
차이점은 해당 스크린이 포커스될 때 동작한다는 것이다.

포커스될 때 마다 동작하는 것을 방지하기 위해서는 useCallback을 사용하여 dependencies를 설정해야한다.
(useEffect처럼 사용이 안되나보다.)

활용예제

진행중인 RN 프로젝트내 stack구조를 갖고있는 스크린간 이동에서 리렌더링 해야 할 일 이생겼다.
스크린1, 스크린2가 있을 때 스크린2에서 스크린1로 가는 상황은 리렌더링 되는 상황이 아닌 단순한 스택 내 이동이기때문에 이걸 해결할 장치가 필요했다.
여기서 필요한 것이 useFocusEffect이다.

//screen1
...
if (res.isSuccess) {
                  navigate("all-pets-screen", { isSaved: true })
                } else {
                  alert("수정에 실패했습니다.")
                }

//screen2
...
useFocusEffect(
      useCallback(() => {
        if (isSaved) {
          console.log("isSaved >>>", isSaved)
          const updatePetState = async () => {
            // @ts-ignore
            petsHandler().then(setPets)
          }
          updatePetState()
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [isSaved]),
    )