3. redux state가 변경되면 모든 컴포넌트 들이 re-render 되는가?

hook의 useSelector를 기준으로 얘기합니다.

function useSelectorWithStoreAndSubscription() {
  const [, forceRender] = useReducer(s => s + 1, 0)
  const latestSelector = useRef()
  const latestSelectedState = useRef()
  // 생략..
}

기본 적으로 컴포넌트를 re-render 하기 위한 forceRender 함수를 state로 관리하고 selector와 그 결과인 state를 memoizing 하기 위해 ref를 만듭니다.

그리고 강조된 부분을 보았을 때 어떤 생각이 드시나요? 잘못 사용하면 ref의 memoization의 이점을 전혀 못 누리겠구나 라고 생각 드시나요? 대부분 아래와 같이 사용하기 때문에 함수는 항상 다시 만들어 집니다.

useSelector(state => state.foo);

그러면 selector는 매번 실행될 겁니다. 간단한 selector의 경우 별 차이가 없겠지만 복잡한 연산이 필요한 selector의 경우 불필요한 연산을 추가로 하게 됩니다.

그렇기 때문에 아래 처럼 사용한다면 좀 더 최적화 할 수 있겠네요.

const selectFoo = state => state.foo;
function Component() {
  useSelector(selectFoo);
}

<aside> 💡 대부분의 경우 큰 의미 없을 것으로 보인다.

</aside>

다음 부분을 보겠습니다.

trySubscribe 를 통해 store의 state 변경을 감지하고 변경 될 경우 checkForUpdates 를 실행하기 위해 onStateChange에 할당 합니다.