2nd/10_Wiki/Topic_Programming/Coding/React_Context_API_Misuse.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
react-context-api-misuse	Context API 잘못 쓰기	Coding	draft	B	conceptual	2026-05-09	2026-05-09	react context state-management vibe-coding	language applicable_to TypeScript / React 18+ Web React Native		provider dependency injection state propagation

Context API 잘못 쓰기

Context 는 자주 안 바뀌는 의존성 주입 도구지 글로벌 상태 매니저가 아니다. 자주 바뀌는 값을 한 Context 에 넣으면 모든 소비자가 매번 재렌더.

📖 핵심 개념

• 적합: theme, locale, auth user, feature flags, DI(API client).
• 부적합: 자주 변하는 list, 입력 값, 폼 state. → Zustand / Redux / Jotai.
• 변화 빈도와 소비자 수가 동시에 크면 split.

💻 코드 패턴

Split by frequency

const StaticContext = createContext({ apiClient, theme }); // 거의 안 바뀜
const PresenceContext = createContext({ onlineUsers });    // 자주 바뀜

<StaticContext.Provider value={static}>
  <PresenceContext.Provider value={presence}>
    {children}
  </PresenceContext.Provider>
</StaticContext.Provider>

Selector hook

function useUserName() {
  const { user } = useContext(AuthContext);
  return user.name; // 그래도 user 객체가 바뀌면 모든 소비자 재렌더
}
// 진짜 selector 가 필요하면 zustand 또는 use-context-selector 라이브러리.

Provider value 안정화

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]); // 매 렌더 새 객체 방지
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

🤔 의사결정 기준

데이터 성격	Context	외부 store
정적 설정 (theme, locale)	✅	❌
인증 user	✅	OK either
실시간 presence / cursor	❌	✅
Form state	❌	react-hook-form
캐시된 서버 데이터	❌	React Query / SWR
UI 상태 (modal open, selection)	✅ (좁은 영역)	✅

❌ 안티패턴

• value 가 매 렌더 새 객체: 모든 소비자 재렌더. useMemo / useState 결과 그대로.
• 한 Context 에 모든 글로벌 상태: GodContext. split 또는 store.
• deeply nested Provider hell (10단계+): 드릴링이 더 나을 수도. 또는 store 통합.
• Context 안의 Date/Map/Set 직접 mutate: 소비자에게 변경 안 알림. 새 인스턴스 반환.
• default value 에 throw 안 던지기: Provider 잊으면 silent default. 안전하게:

  const ctx = useContext(MyContext);
  if (!ctx) throw new Error('useMyContext must be used within MyProvider');
  

🤖 LLM 활용 힌트

• 상태 라이브러리 선택지 명시: "이 데이터는 Context vs Zustand vs React Query 중 어디?"
• LLM이 큰 글로벌 state 에 Context 만 쓰려고 하면 store 권유.

🔗 관련 문서

• React_Rendering_Optimization
• React_Custom_Hook_Patterns