createContext permite que você crie um contexto que componentes podem fornecer ou consumir.

const SomeContext = createContext(defaultValue)

Referência

createContext(defaultValue)

Invoque createContext fora de qualquer componente para criar um contexto.

import { createContext } from 'react';

const ThemeContext = createContext('light');

Veja mais exemplos abaixo.

Parâmetros

  • defaultValue: O valor que você quer que o contexto tenha quando não há um provedor de contexto correspondente na árvore acima do componente que lê o contexto. Se você não tem um valor padrão significativo, especifique null. O valor padrão é um “último recurso” reserva. Ele é estático e nunca muda com o tempo.

Retornos

createContext retorna um objeto de contexto.

O objeto de contexto em si, não possui nenhuma informação. Ele representa qual contexto outros componentes irão consumir ou fornecer. Geralmente, você vai usarSomeContext.Provider em um componente acima para especificar um valor para o contexto, e invocar useContext(SomeContext) em componentes abaixo pra consumi-lo. O objeto de contexto possui algumas propriedades:

  • SomeContext.Provider permite que você forneça o valor do contexto aos seus componentes.
  • SomeContext.Consumer é uma alternativa raramanete usada como uma forma de consumir o valor de um contexto.

SomeContext.Provider

Envolva seus componente em um provedor de contexto para especificar o valor desse contexto para todos os componentes dentro dele:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Props

  • value: O valor que você deseja passar para todos os componentes que estão consumindo esse contexto dentro deste provedor, não importa o quão profundo. O valor do contexto pode ser de qualquer tipo. Um componente invocando useContext(SomeContext) dentro do provedor recebe o value do provedor de contexto correspondente mais próximo acima dele.

SomeContext.Consumer

Antes do useContext existir, havia uma forma mais arcaica de consumir um contexto:

function Button() {
  // 🟡 Jeito legado (não recomendado)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

Apesar dessa forma mais antiga ainda funcionar, códigos recém escritos devem consumir o contexto com useContext() ao invés disso:

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

Props

  • children: Uma função. O React invocará a função que você passar com o valor do contexto atual determinado pelo mesmo algoritmo que o useContext() utiliza, e renderizará o resultado que você retornar dessa função. O React também irá re-executar essa função e atualizar a UI sempre que o contexto dos componentes pais mudar.

Uso

Criando um contexto

Contextos permitem passar informação profundamente sem precisar passar props manualmente em cada nível.

Invoque createContext fora de qualquer componente para criar um ou mais contextos.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext retorna um objeto de contexto. Componentes podem consumir esse contexto passando-o para o hook useContext():

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

Por padrão, os valores que receberão são os valores padrão que você especificou quando criava os contextos. Porém, por si só isso não é útil porque os valores padrão nunca mudam.

Contextos são úteis porque você pode fornecer outros valores dinâmicos de seus componentes:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Agora o componente Page e qualquer componente dentro dele, não importa o quão profundo esteja, irão “ver” os valores do contexto passados. Se os valores do contexto mudarem, o React também irá re-renderizar os componentes que estão lendo o contexto.

Leia mais sobre consumir e providenciar contexto e veja exemplos.

Importando e exportando contextos de um arquivo

Frequentemente, componentens em arquivos diferentes irão precisar acessar o mesmo contexto. É por isso que é comum declarar contextos em um arquivo separado. Então você pode usar o export statement para tornar o contexto disponível para outros arquivos:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

Componentes declarados em outros arquivos podem usar o import para ler ou providenciar esse contexto:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}
// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Isso funciona de forma similar com a importação e exportação de componentes.

Resolução de problemas

Não consigo encontrar uma forma de mudar o valor do contexto

Código como esse especifica o valor padrão do contexto:

const ThemeContext = createContext('light');

Esse valor nunca muda. React só usa esse valor como um fallback (reserva) se ele não conseguir encontrar um provedor correspondente acima.

Para fazer o valor do contexto mudar com o tempo, adicione estado e envolva os componentes em um provedor de contexto (context provider).

Previouscache
NextforwardRef