Hooks

Context API + useContext

Compartilha valores entre componentes sem prop drilling. Provider envolve, useContext consome.

Definição

Context API permite compartilhar valores (tema, usuário, idioma) entre componentes sem passar props manualmente em cada nível. createContext() cria o contexto, <Provider value={...}> envolve a árvore, useContext(MyContext) lê o valor.

Problema → Solução

Problema

Prop drilling: passar props através de 5+ níveis de componentes que não usam, apenas repassam. Código verboso e difícil de refatorar.

Solução

Context API: Provider envolve uma vez no topo, qualquer descendente usa useContext para acessar diretamente. Mas atenção: Context causa re-render de TODOS os consumers quando o value muda.

Dica de entrevista

Tip

Context não é state management — é prop drilling avoidance. Para state global complexo, prefira Zustand/Redux/Jotai (mais performáticos).

Código

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');
  const value = useMemo(() => ({ theme, setTheme }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      <Layout />
    </ThemeContext.Provider>
  );
}

function Button() {
  const { theme } = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}

Perguntas de entrevista

Q.Por que Context causa re-renders excessivos?▾

A.Quando o value do Provider muda, TODOS os componentes que usam useContext re-renderizam, mesmo que só usem parte do valor. Solução: dividir em múltiplos contexts ou usar libs como use-context-selector.

Q.Context vs Redux/Zustand?▾

A.Context: ideal para valores que raramente mudam (tema, idioma, usuário). Redux/Zustand: para state que muda frequentemente, com seletores otimizados que evitam re-renders desnecessários.

Q.Como evitar re-renders desnecessários no Context?▾

A.1) Estabilizar value com useMemo. 2) Dividir contexts (ThemeContext separado de UserContext). 3) Usar libs como use-context-selector que permitem seletores. 4) Memoizar componentes consumidores.

Termos relacionados

24/122← →