React.memo 점검

memo는 안정적인 props를 만날 때만 렌더를 건너뛴다

컴포넌트를 감싸도 부모가 매번 새 함수와 새 객체를 전달하면 얕은 비교는 계속 변경으로 판단합니다.

memo broken

부모 렌더마다 새 참조 전달

function

() => save(id)가 매번 새로 생성됩니다.

object

{ active: true } 같은 객체가 새 참조가 됩니다.

memo works

참조와 원시 값이 안정적으로 유지

callback

useCallback으로 함수 참조를 유지합니다.

derived

useMemo로 배열과 객체 결과를 재사용합니다.

01

React.memo

자식 컴포넌트가 같은 props면 다시 호출되지 않게 합니다.

02

useCallback

자식에게 넘기는 이벤트 핸들러의 참조를 안정화합니다.

03

useMemo

필터링 결과나 옵션 객체가 매번 새로 만들어지지 않게 합니다.