createContext
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');
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, especifiquenull
. 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 invocandouseContext(SomeContext)
dentro do provedor recebe ovalue
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 ouseContext()
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).