useCallBack 함수는 useEffect 와 달리, dependency 비교를 레퍼런스로 하지 않고 밸류로 한다.
리액트 레포지터리에 있는 코드를 보면 알수있다.
그래서 컴포넌트가 리렌더를 하여도, 디펜던씨 리스트에 넣어진 변수들의 밸류값이 변하지 않으면 이전 함수콜에 저장된 prevState[0]
콜백을 리턴하여 컴포턴트가 렌더 할때마다 비싼게 계산되는 함수가 다시 계산되지 않고 전에 저장한 함수로 다시 쓰는것이다. ( prevState
는 hook.memoizedState
에서 온값이다. const prevState = hook.memoizedState
. hook.memoizedState
는 무엇을 저장하는 지 알고 싶으면 라인 15을 보면 알수 있다.
useCallback 은 컴포넌트가 렌더할때마다 콜이 되는 useEffect와 이런점에 서 다른것을 알수 있다. useEffect는 컴포넌트가 리렌더링할때와 디펜던시 변수가 변함에 때라 콜이 되기 때문이다.