Context no React: o que é, como funciona e quando usar
Entenda o que é Context no React, como funciona com Provider e useContext, quando usar e quando evitar.
- #Curso de Frontend
- #React Context
- #React
- #Context
- #useContext
- #Provider
- #State
O problema que o Context resolve
Em React, normalmente passamos dados de um componente para outro usando props. Isso funciona muito bem quando o componente que precisa da informação está perto.
Quando uma informação precisa atravessar muitos níveis da árvore, você pode acabar repassando props por componentes que nem usam aquele dado. Isso se chama prop drilling.
Context ajuda quando uma informação precisa estar disponível para vários componentes em diferentes níveis da árvore.
O que é Context?
Context é um recurso do React que permite disponibilizar uma informação para componentes abaixo de um Provider, sem precisar passar props manualmente em cada nível.
Ele é útil para dados como tema claro ou escuro, usuário autenticado, idioma, carrinho de compras, preferências globais, filtros globais e configurações da aplicação.
Criando um Context simples
Vamos criar um contexto de tema com ThemeProvider e um hook useTheme para consumir o contexto.
Lendo o código: createContext cria o contexto, Provider disponibiliza valores para componentes internos e useContext permite ler esses valores em outro componente.
import { createContext, useContext, useState } from "react";
import type { ReactNode } from "react";
type Theme = "light" | "dark";
type ThemeContextValue = {
theme: Theme;
toggleTheme: () => void;
};
const ThemeContext = createContext<ThemeContextValue | null>(null);
type ThemeProviderProps = {
children: ReactNode;
};
export function ThemeProvider({ children }: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>("light");
function toggleTheme() {
setTheme((currentTheme) => {
return currentTheme === "light" ? "dark" : "light";
});
}
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error("useTheme deve ser usado dentro de ThemeProvider");
}
return context;
}Provider e consumo do contexto
No main.tsx, envolva App com ThemeProvider. Agora qualquer componente dentro de App pode acessar o tema usando useTheme.
Um componente como ThemeButton pode usar theme e toggleTheme sem receber props manualmente.
O Provider precisa ficar acima dos componentes que vão consumir o contexto. Se um componente chama useContext fora do Provider, ele não recebe os valores esperados.
import { useTheme } from "../contexts/ThemeContext";
export function ThemeButton() {
const { theme, toggleTheme } = useTheme();
return (
<button
onClick={toggleTheme}
className="rounded-lg bg-blue-600 px-4 py-2 text-white"
>
Tema atual: {theme}
</button>
);
}Quando usar e quando evitar
Use Context quando uma informação precisa ser acessada por vários componentes em partes diferentes da aplicação, como tema, usuário logado, idioma, carrinho, preferências globais ou configurações da interface.
Evite Context quando a informação pertence a apenas um componente ou a uma área pequena. O texto de um campo de busca, por exemplo, geralmente pode ficar como state local da página.
Context é útil para dados compartilhados por várias partes da interface. Para estado usado por apenas um componente ou por poucos componentes próximos, props e state local costumam ser suficientes.
Context substitui props ou bibliotecas de estado?
Context não substitui props. Props continuam sendo a forma mais simples e direta de passar informações entre componentes próximos.
Context também não resolve todos os problemas de estado. Para aplicações maiores, pode ser necessário usar bibliotecas específicas ou outras abordagens.
Context não elimina props. Ele reduz a necessidade de passar a mesma informação por muitos níveis quando vários componentes distantes precisam dela.
