Aula 09 – Context API: Estado Global Simples 🌐

Às vezes, as Props não são suficientes. Passar dados por 5 ou 6 níveis de componentes (Prop Drilling) é cansativo. Hoje vamos aprender a usar a Context API para compartilhar dados globalmente.

---

😵 O Problema do Prop Drilling

graph TD
    App --> Pagina
    Pagina --> Sidebar
    Sidebar --> Menu
    Menu --> Item[Item do Menu - Precisa do nome do Usuário]

No exemplo acima, todos os componentes do meio precisam receber o "usuário" apenas para passá-lo adiante. Isso é o Prop Drilling.

---

💡 A Solução: Context API

O Contexto permite que qualquer componente acesse o dado diretamente, "pulando" os intermediários.

Passo 1: Criar o Contexto

// src/contexts/AuthContext.jsx
import { createContext, useState } from 'react';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState({ nome: 'Convidado' });

  return (
    <AuthContext.Provider value=(Undefined, Undefined)>
      {children}
    </AuthContext.Provider>
  );
}

Passo 2: O Provedor (Provider)

Envolva a aplicação no main.jsx ou App.jsx.

<AuthProvider>
  <App />
</AuthProvider>

Passo 3: Consumir os Dados

import { useContext } from 'react';
import { AuthContext } from './contexts/AuthContext';

const { user } = useContext(AuthContext);

---

🚀 Prática da Aula

Vamos criar uma "Loja com Carrinho".

1. Crie um CarrinhoContext.
2. O estado global deve ser um array de produtos no carrinho.
3. Crie componentes em lugares diferentes da tela:
   • Navbar: Deve mostrar a quantidade de itens no carrinho.
   • Vitrine: Deve ter botões para adicionar itens ao contexto.
   • CarrinhoLateral: Deve listar os itens que estão no contexto.

---

📊 Prop Drilling vs Context

Técnica	Quando usar?
Props	Para dados que só o filho imediato precisa.
Context API	Para dados globais (Tema, Autenticação, Carrinho).
Redux	Para aplicações gigantescas com lógica complexa.

Dica de Ouro

Não coloque TUDO no contexto. Use-o apenas para o que realmente precisa ser global, para evitar renderizações desnecessárias.