React.memo 점검

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

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

memo broken

부모 렌더마다 새 참조 전달

function

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

object

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

memo works

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

callback

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

derived

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