Context value 범위

공유 값 선택

여러 깊은 자식이 필요하지만 중간 컴포넌트는 쓰지 않는 값을 고른다.

avoid drilling

값이 필요한 가장 좁은 서브트리 위에 Provider를 둔다.

범위

객체 value는 useMemo, 함수는 useCallback으로 불필요한 참조 변경을 줄인다.

identity

자주 바뀌는 값과 거의 안 바뀌는 값을 별도 context로 나눈다.

리렌더링 경계

theme

드물게 전체 UI 갱신 변경 빈도가 낮고 많은 컴포넌트가 필요하므로 context에 적합하다.

global UI

form field

입력마다 많은 소비자 재렌더 필드별 state, form library, local state가 더 적합할 수 있다.

high frequency

auth

로그인/로그아웃 시 권한 UI 갱신 user 객체와 action 함수를 분리하거나 memoized value로 묶는다.

세션 경계

server cache

데이터 동기화 책임 혼재 fetch cache는 context보다 query/cache 라이브러리가 맞을 수 있다.

data layer

렌더 추적 DevTools Profiler로 value 하나 변경 시 어떤 컴포넌트가 다시 렌더되는지 본다.

범위 축소 Provider를 앱 루트에 둘 필요가 없다면 해당 기능 영역으로 내린다.

분리 상태와 dispatch를 다른 context로 나누면 읽기 전용 소비자 재렌더를 줄일 수 있다.