렌더링 결과에 영향을 미치지 않는 변경사항이 발생했을 때도 렌더링 된다면 불필요한 렌더링이 발생한 것으로 볼 수 있다.
React는 state가 변경되거나 새로운 컴포넌트가 렌더링 되는 시점에 shallow copy를 통해 같은 값인지 판단한다. 즉 객체(함수 포함)는 같은 참조가 아니라면 새로운 값으로 판단된다.
이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하고 성능을 향상시키는 기법
함수형 컴포넌트의 불필요한 리렌더링을 제어하는 방법에는 아래와 같은 것이 있다.
/// users 이외의 state가 변경되더라도 count 값을 다시 계산하게 된다.
const count = countUsers(users);
return (<>
<UserList users={users} email={email} onToggle={onToggle} />
<div>{count}</div></>);
/// useMemo 사용
const count = useMemeo(() => countUsers(users), [users]);