리액트 개발자 도구의 톱니바퀴를 눌러서 Highlight Updates 를 체크하세요.

카운터의 +, - 를 눌러보시면 하단의 할 일 목록이 리렌더링되진 않지만 할 일 목록의 항목을 토글 할 때에는 카운터가 리렌더링되는 것을 확인 할 수 있습니다.

기본적으로, useSelector를 사용해서 리덕스 스토어의 상태를 조회 할 땐 만약 상태가 바뀌지 않았으면 리렌더링하지 않습니다.

TodosContainer

const todos = useSelector(state => state.todos);

TodosContainer 의 경우 카운터 값이 바뀔 때 todos 값엔 변화가 없으니까, 리렌더링되지 않는것이죠.

CounterContainer

const { number, diff } = useSelector(state => ({
  number: state.counter.number,
  diff: state.counter.diff
}));

CounterContainer에서는 사실상 useSelector Hook 을 통해 매번 렌더링 될 때마다 새로운 객체 { number, diff }를 만드는 것이기 때문에 상태가 바뀌었는지 바뀌지 않았는지 확인을 할 수 없어서 낭비 렌더링이 이루어지고 있는 것 입니다

최적화를 위한 방법 2가지

첫번째는, useSelector 를 여러번 사용하는 것 입니다.