Quando Context é uma boa solução de estado e quando não é?

Question

Accepted Answer

A **Context API** do React permite compartilhar um valor com toda uma subárvore de componentes sem prop drilling. É ótimo para dados **pouco frequentes, amplamente compartilhados** — mas não é uma solução completa de gerenciamento de estado e tem uma armadilha de re-renderização para estado que muda com frequência. ## Quando Context é excelente ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## A armadilha: cada consumidor re-renderiza em QUALQUER mudança ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` Quando o valor do context muda, **todos** os componentes que consomem esse contexto re-renderizam — independentemente de usarem a parte que mudou. Para estado frequentemente atualizado, isso causa problemas de desempenho. Context não tem subscrição seletiva integrada. ## Mitigações e a alternativa ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` Bibliotecas de estado (Zustand, Redux, Jotai) resolvem o problema de re-renderização com **subscrições seletivas** — componentes se inscrevem apenas nas fatias que usam e re-renderizam apenas quando essas mudam: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context não é um gerenciador de estado ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## Por que isso importa Conhecer o ponto forte do Context — e seus limites — evita dois erros comuns: fazer prop drilling de coisas que deveriam estar em Context e colocar estado de alta frequência em Context (causando re-renderizações em toda a aplicação). A regra: Context para **valores raramente mutáveis, amplamente compartilhados** (tema, usuário, localidade); uma store dedicada com subscrições seletivas para estado **frequentemente mutável ou grande** compartilhado. Entender que Context distribui estado mas não o gerencia esclarece quando é suficiente e quando você precisa de mais.