📊 Capítulo 08: Context API & Custom Hooks

Especialização em Frontend com React

🗺️ A Solução para Prop Drilling com Context Provider

flowchart TD
    APP["<App /> (Raiz)"]
    --> PROV["<AuthContext.Provider value={{ usuario, login, logout }}>"]
    PROV --> HEADER["<Header />"]
    PROV --> MAIN["<Main />"]
    MAIN --> SECTION["<PerfilSection />"]
    SECTION --> CARD["<AvatarCard />\n(Consome const { usuario } = useAuth() diretamente sem intermediários!)"]

    style APP fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style PROV fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style HEADER fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style MAIN fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style SECTION fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style CARD fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: O Padrão Custom Hook Seguro

export function useAuth() {
  const contexto = useContext(AuthContext);
  if (!contexto) {
    throw new Error('useAuth deve ser utilizado dentro de um <AuthProvider>');
  }
  return contexto;
}

• Garante segurança em tempo de desenvolvimento contra consumidores esquecidos fora do Provider!

🎯 Slide 2: Cuidados com Re-renderização no Context

• Quando o valor de value={...} muda, todos os componentes que chamam useContext re-renderizam, mesmo que usem apenas um pedaço do contexto.

• Boas Práticas: Separe o contexto de estado do contexto de ações (AuthContextState e AuthContextDispatch).

🎯 Slide 3: Custom Hooks para Lógica de Negócio

• useLocalStorage, useDebounce, useWindowSize, useFetch: Encapsulam useState + useEffect em funções elegantes e 100% reutilizáveis!