Tipando Contexto

Q: Por que usar null como valor padrão do contexto em vez de um objeto vazio?

createContext({} as T) fornece um objeto inválido que causa silenciosamente falhas em tempo de execução se o provider estiver ausente. O padrão null combinado com um hook de guarda fornece uma mensagem de erro clara quando o provider está ausente. Evita inventar valores padrão falsos que poderiam mascarar bugs.

Q: Como o padrão de hook customizado (useTheme, useAuth) melhora a segurança de tipos?

Estreita o tipo de T | null para T com uma única guarda em tempo de execução. Os consumidores obtêm um tipo limpo e não anulável sem verificações de null.

Q: Qual é o tipo de um setter do useState quando exposto através do contexto?

React.Dispatch>. Isso permite tanto valores diretos quanto funções atualizadoras: setState(5) e setState(prev => prev + 1).

Q: Armadilha: O que acontece se você usar as T para fazer cast do valor padrão do contexto?

createContext({} as ThemeContextType) compila, mas fornece um objeto sem propriedades reais. Se um componente renderizar fora do provider, ele recebe o objeto vazio e falha em tempo de execução. O padrão null + guarda é estritamente mais seguro.

Q: Como você tipa um contexto que usa useReducer?

React.Dispatch é o tipo de uma função de dispatch do useReducer. O contexto carrega tanto o estado quanto o dispatch para os consumidores.

Q: Como você estabiliza o valor do contexto com useMemo?

useMemo garante que o objeto de valor só mude quando as dependências mudarem. Isso evita re-renderizações desnecessárias de consumidores.

Receita

Crie contextos React totalmente tipados com createContext, providers tipados e hooks useContext type-safe. Lide com o problema do valor padrão de forma limpa.

Exemplo de Trabalho

// 1. Defina o tipo do contexto
type Theme = "light" | "dark";
 
type ThemeContextType = {
  theme: Theme;
  toggleTheme: () => void;
};
 
// 2. Crie o contexto com um valor padrão sensato ou null
const ThemeContext = createContext<ThemeContextType | null>(null);
 
// 3. Crie um hook tipado com uma guarda em tempo de execução
function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme deve ser usado dentro de um ThemeProvider");
  }
  return context;
}
 
// 4. Crie o componente provider
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
 
  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };
 
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
// 5. Consuma em um componente
function Header() {
  const { theme, toggleTheme } = useTheme();
 
  return (
    <header className={theme}>
      <button onClick={toggleTheme}>Atual: {theme}</button>
    </header>
  );
}

Análise Profunda

Como Funciona

createContext<T>(defaultValue) cria um objeto de contexto. O genérico T define a forma do valor que os providers devem fornecer e os consumidores receberão.
O padrão de null como padrão + hook customizado evita dois problemas: (1) inventar um valor padrão falso que poderia mascarar bugs e (2) forçar os consumidores a verificar por undefined em todos os lugares.
O hook customizado useTheme() estreita o tipo de ThemeContextType | null para ThemeContextType lançando um erro se o contexto estiver faltando. Isso dá aos consumidores um tipo limpo e não anulável.
O React re-renderiza todos os consumidores quando o value do provider muda. Como { theme, toggleTheme } é um novo objeto a cada renderização, envolva-o com useMemo se você tiver muitos consumidores.

Variações

Contexto com useMemo para valor estável:

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
 
  const value = useMemo<ThemeContextType>(
    () => ({
      theme,
      toggleTheme: () => setTheme((prev) => (prev === "light" ? "dark" : "light")),
    }),
    [theme]
  );
 
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

Múltiplos contextos para preocupações separadas:

type AuthContextType = {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
};
 
const AuthContext = createContext<AuthContextType | null>(null);
 
function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth deve ser usado dentro de AuthProvider");
  return context;
}

Contexto com useReducer:

type AppState = { count: number; user: User | null };
type AppAction = { type: "increment" } | { type: "setUser"; payload: User };
 
type AppContextType = {
  state: AppState;
  dispatch: React.Dispatch<AppAction>;
};
 
const AppContext = createContext<AppContextType | null>(null);

Notas do TypeScript

React.Dispatch<React.SetStateAction<T>> é o tipo de um setter do useState. Use-o em tipos de contexto ao expor um setter diretamente.
React.Dispatch<Action> é o tipo de uma função de dispatch do useReducer.
Evite usar as para fazer cast do valor padrão: createContext({} as ThemeContextType) compila, mas fornece um objeto inválido em tempo de execução se o provider estiver ausente.

Armadilhas

Usar createContext({} as T) silencia o TypeScript, mas leva a falhas em tempo de execução quando o provider está ausente. O padrão null + guarda é mais seguro.
Colocar um novo objeto em value a cada renderização faz com que todos os consumidores re-renderizem. Use useMemo para o objeto de valor.
Dividir dados não relacionados em contextos separados evita re-renderizações desnecessárias. Um único contexto massivo re-renderiza todos os consumidores quando qualquer campo muda.
O padrão de hook customizado (useTheme, useAuth) é crítico para uma boa DX. Sem ele, os consumidores precisam importar tanto o contexto quanto useContext, e lidar com null eles mesmos.

Alternativas

Abordagem	Prós	Contras
Padrão `null` + hook de guarda	Type-safe, erro claro em caso de mau uso	Requer um hook customizado por contexto
Asserção não-nula (`{} as T`)	Nenhuma verificação de null necessária	Falha em tempo de execução se o provider estiver ausente
Valor padrão real	Funciona sem provider	Precisa inventar um padrão significativo
Zustand ou Jotai	API mais simples, assinaturas granulares	Dependência externa
Estado em nível de módulo	Sem aninhamento de provider	Não reativo, não seguro para SSR

FAQs

Por que usar `null` como valor padrão do contexto em vez de um objeto vazio?

createContext({} as T) fornece um objeto inválido que causa silenciosamente falhas em tempo de execução se o provider estiver ausente.
O padrão null combinado com um hook de guarda fornece uma mensagem de erro clara quando o provider está ausente.
Evita inventar valores padrão falsos que poderiam mascarar bugs.

Como o padrão de hook customizado (`useTheme`, `useAuth`) melhora a segurança de tipos?

function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme deve ser usado dentro de ThemeProvider");
  }
  return context; // estreitado para ThemeContextType
}

Estreita o tipo de T | null para T com uma única guarda em tempo de execução.
Os consumidores obtêm um tipo limpo e não anulável sem verificações de null.

Por que colocar um novo objeto no `value` do Provider a cada renderização causa problemas de performance?

O React re-renderiza todos os consumidores quando a referência do value do provider muda.
{ theme, toggleTheme } cria um novo objeto a cada renderização, acionando re-renderizações.
Envolva o valor com useMemo para produzir uma referência estável.

Quando você deve dividir o estado em contextos separados?

Quando dados não relacionados são agrupados em um único contexto, todos os consumidores re-renderizam quando qualquer campo muda.
Contextos separados (por exemplo, AuthContext, ThemeContext) evitam re-renderizações desnecessárias.
Divida quando os consumidores precisam apenas de um subconjunto dos dados.

Qual é o tipo de um setter do `useState` quando exposto através do contexto?

React.Dispatch<React.SetStateAction<T>>.
Isso permite tanto valores diretos quanto funções atualizadoras: setState(5) e setState(prev => prev + 1).

Armadilha: O que acontece se você usar `as T` para fazer cast do valor padrão do contexto?

createContext({} as ThemeContextType) compila, mas fornece um objeto sem propriedades reais.
Se um componente renderizar fora do provider, ele recebe o objeto vazio e falha em tempo de execução.
O padrão null + guarda é estritamente mais seguro.

Como você tipa um contexto que usa `useReducer`?

type AppContextType = {
  state: AppState;
  dispatch: React.Dispatch<AppAction>;
};
 
const AppContext = createContext<AppContextType | null>(null);

React.Dispatch<Action> é o tipo de uma função de dispatch do useReducer.
O contexto carrega tanto o estado quanto o dispatch para os consumidores.

Quando você deve usar Zustand ou Jotai em vez de React Context?

Quando você precisa de assinaturas granulares (re-renderizar apenas quando campos específicos mudam).
Quando a complexidade da API de providers, hooks customizados e useMemo se torna excessiva.
Contexto é suficiente para atualizações de baixa frequência, como estado de tema ou autenticação.

Armadilha: Você pode usar um valor padrão real em `createContext` para evitar o padrão null?

Sim, se você puder fornecer um padrão significativo que seja seguro para usar sem um provider.
Isso remove a necessidade de um hook de guarda customizado.
No entanto, inventar padrões plausíveis (como funções no-op) pode ocultar bugs quando o provider está ausente acidentalmente.

Como você estabiliza o valor do contexto com `useMemo`?

const value = useMemo<ThemeContextType>(
  () => ({
    theme,
    toggleTheme: () => setTheme((p) => (p === "light" ? "dark" : "light")),
  }),
  [theme]
);
 
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

useMemo garante que o objeto de valor só mude quando as dependências mudarem.
Isso evita re-renderizações desnecessárias de consumidores.

// 1. Defina o tipo do contexto
type Theme = "light" | "dark";
 
type ThemeContextType = {
  theme: Theme;
  toggleTheme: () => void;
};
 
// 2. Crie o contexto com um valor padrão sensato ou null
const ThemeContext = createContext<ThemeContextType | null>(null);
 
// 3. Crie um hook tipado com uma guarda em tempo de execução
function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme deve ser usado dentro de um ThemeProvider");
  }
  return context;
}
 
// 4. Crie o componente provider
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
 
  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };
 
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
// 5. Consuma em um componente
function Header() {
  const { theme, toggleTheme } = useTheme();
 
  return (
    <header className={theme}>
      <button onClick={toggleTheme}>Atual: {theme}</button>
    </header>
  );
}

Análise Profunda

Como Funciona

createContext<T>(defaultValue) cria um objeto de contexto. O genérico T define a forma do valor que os providers devem fornecer e os consumidores receberão.
O padrão de null como padrão + hook customizado evita dois problemas: (1) inventar um valor padrão falso que poderia mascarar bugs e (2) forçar os consumidores a verificar por undefined em todos os lugares.
O hook customizado useTheme() estreita o tipo de ThemeContextType | null para ThemeContextType lançando um erro se o contexto estiver faltando. Isso dá aos consumidores um tipo limpo e não anulável.
O React re-renderiza todos os consumidores quando o value do provider muda. Como { theme, toggleTheme } é um novo objeto a cada renderização, envolva-o com useMemo se você tiver muitos consumidores.

Variações

Contexto com useMemo para valor estável:

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
 
  const value = useMemo<ThemeContextType>(
    () => ({
      theme,
      toggleTheme: () => setTheme((prev) => (prev === "light" ? "dark" : "light")),
    }),
    [theme]
  );
 
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

Múltiplos contextos para preocupações separadas:

type AuthContextType = {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
};
 
const AuthContext = createContext<AuthContextType | null>(null);
 
function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth deve ser usado dentro de AuthProvider");
  return context;
}

Contexto com useReducer:

type AppState = { count: number; user: User | null };
type AppAction = { type: "increment" } | { type: "setUser"; payload: User };
 
type AppContextType = {
  state: AppState;
  dispatch: React.Dispatch<AppAction>;
};
 
const AppContext = createContext<AppContextType | null>(null);

Notas do TypeScript

React.Dispatch<React.SetStateAction<T>> é o tipo de um setter do useState. Use-o em tipos de contexto ao expor um setter diretamente.
React.Dispatch<Action> é o tipo de uma função de dispatch do useReducer.
Evite usar as para fazer cast do valor padrão: createContext({} as ThemeContextType) compila, mas fornece um objeto inválido em tempo de execução se o provider estiver ausente.

Armadilhas

Usar createContext({} as T) silencia o TypeScript, mas leva a falhas em tempo de execução quando o provider está ausente. O padrão null + guarda é mais seguro.
Colocar um novo objeto em value a cada renderização faz com que todos os consumidores re-renderizem. Use useMemo para o objeto de valor.
Dividir dados não relacionados em contextos separados evita re-renderizações desnecessárias. Um único contexto massivo re-renderiza todos os consumidores quando qualquer campo muda.
O padrão de hook customizado (useTheme, useAuth) é crítico para uma boa DX. Sem ele, os consumidores precisam importar tanto o contexto quanto useContext, e lidar com null eles mesmos.

Alternativas

Abordagem	Prós	Contras
Padrão `null` + hook de guarda	Type-safe, erro claro em caso de mau uso	Requer um hook customizado por contexto
Asserção não-nula (`{} as T`)	Nenhuma verificação de null necessária	Falha em tempo de execução se o provider estiver ausente
Valor padrão real	Funciona sem provider	Precisa inventar um padrão significativo
Zustand ou Jotai	API mais simples, assinaturas granulares	Dependência externa
Estado em nível de módulo	Sem aninhamento de provider	Não reativo, não seguro para SSR

FAQs

Por que usar `null` como valor padrão do contexto em vez de um objeto vazio?

createContext({} as T) fornece um objeto inválido que causa silenciosamente falhas em tempo de execução se o provider estiver ausente.
O padrão null combinado com um hook de guarda fornece uma mensagem de erro clara quando o provider está ausente.
Evita inventar valores padrão falsos que poderiam mascarar bugs.

Como o padrão de hook customizado (`useTheme`, `useAuth`) melhora a segurança de tipos?

function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme deve ser usado dentro de ThemeProvider");
  }
  return context; // estreitado para ThemeContextType
}

Estreita o tipo de T | null para T com uma única guarda em tempo de execução.
Os consumidores obtêm um tipo limpo e não anulável sem verificações de null.

Por que colocar um novo objeto no `value` do Provider a cada renderização causa problemas de performance?

O React re-renderiza todos os consumidores quando a referência do value do provider muda.
{ theme, toggleTheme } cria um novo objeto a cada renderização, acionando re-renderizações.
Envolva o valor com useMemo para produzir uma referência estável.

Quando você deve dividir o estado em contextos separados?

Quando dados não relacionados são agrupados em um único contexto, todos os consumidores re-renderizam quando qualquer campo muda.
Contextos separados (por exemplo, AuthContext, ThemeContext) evitam re-renderizações desnecessárias.
Divida quando os consumidores precisam apenas de um subconjunto dos dados.

Qual é o tipo de um setter do `useState` quando exposto através do contexto?

React.Dispatch<React.SetStateAction<T>>.
Isso permite tanto valores diretos quanto funções atualizadoras: setState(5) e setState(prev => prev + 1).

Armadilha: O que acontece se você usar `as T` para fazer cast do valor padrão do contexto?

createContext({} as ThemeContextType) compila, mas fornece um objeto sem propriedades reais.
Se um componente renderizar fora do provider, ele recebe o objeto vazio e falha em tempo de execução.
O padrão null + guarda é estritamente mais seguro.

Como você tipa um contexto que usa `useReducer`?

type AppContextType = {
  state: AppState;
  dispatch: React.Dispatch<AppAction>;
};
 
const AppContext = createContext<AppContextType | null>(null);

React.Dispatch<Action> é o tipo de uma função de dispatch do useReducer.
O contexto carrega tanto o estado quanto o dispatch para os consumidores.

Quando você deve usar Zustand ou Jotai em vez de React Context?

Quando você precisa de assinaturas granulares (re-renderizar apenas quando campos específicos mudam).
Quando a complexidade da API de providers, hooks customizados e useMemo se torna excessiva.
Contexto é suficiente para atualizações de baixa frequência, como estado de tema ou autenticação.

Armadilha: Você pode usar um valor padrão real em `createContext` para evitar o padrão null?

Sim, se você puder fornecer um padrão significativo que seja seguro para usar sem um provider.
Isso remove a necessidade de um hook de guarda customizado.
No entanto, inventar padrões plausíveis (como funções no-op) pode ocultar bugs quando o provider está ausente acidentalmente.

Como você estabiliza o valor do contexto com `useMemo`?

const value = useMemo<ThemeContextType>(
  () => ({
    theme,
    toggleTheme: () => setTheme((p) => (p === "light" ? "dark" : "light")),
  }),
  [theme]
);
 
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

useMemo garante que o objeto de valor só mude quando as dependências mudarem.
Isso evita re-renderizações desnecessárias de consumidores.

Tipando Contexto

Receita

Exemplo de Trabalho

Análise Profunda

Como Funciona

Variações

Notas do TypeScript

Armadilhas

Alternativas

FAQs

Relacionado

Tipando Contexto

Receita

Exemplo de Trabalho

Análise Profunda

Como Funciona

Variações

Notas do TypeScript

Armadilhas

Alternativas

FAQs

Relacionado

Tipando Contexto

Buscar na documentação

Tipando Contexto