Bem-vindos de volta, amigos!


Hoje vamos revisar o básico de um React Hook chamado useContext. useContext é uma ferramenta poderosa que vai um passo além de useState para criar um estado global que pode transmitir informações para componentes filhos e netos sem passar adereços diretamente.

Mas estou me adiantando.
Se você não está familiarizado com useState, leia primeiro meu artigo anterior, depois volte e prepare-se para se surpreender!


Como usar ‘useState’: https://dev.to/deborah/how-to-use-state-in-react-2pah

Agora que você está familiarizado com ‘useState’, vamos mergulhar em ‘useContext’!

O que é useContext?:

useContext é ideal para dados que precisam ser colocados em um escopo global (como um nome de usuário que manterá alguém conectado durante todo o aplicativo), mas não é o atalho final para passando adereços para componentes filhos.
No entanto, useContext nos permite passar dados sem passar props diretamente e, portanto, é extremamente útil quando encontramos dados que precisam ser acessados ​​por vários componentes filhos ou disponibilizados em todo o aplicativo.

Para colocar o useContext em funcionamento, precisamos seguir duas etapas: primeiro, precisamos criar um objeto de contexto ('createContext') e, em seguida, precisamos acessar o valor por meio de um provedor usando o gancho 'useContext' .

Os exemplos a seguir foram simplificados para lhe dar uma ideia melhor do que se trata useContext e como usá-lo, mas você deve estar ciente de que createContext geralmente é declarado em um arquivo próprio separado. No entanto, estou comparando 'Parent.js' a um arquivo 'App.js' típico (um componente no topo da hierarquia de componentes). Parent.js é onde defini todas as minhas variáveis ​​de estado, as funções que atualizam essas variáveis ​​de estado e fiz buscas no banco de dados usando useEffect. Optei por declarar createContext em meu componente de nível superior em vez de criar seu próprio arquivo para simplificar esta explicação para que você possa entender melhor os conceitos básicos do Contexto.

Com tudo isso dito, vamos começar do início: createContext!

1. A primeira coisa que precisamos fazer é declarar e exportar uma variável chamada 'Contexto' que usaremos mais tarde em nossos componentes filhos [estamos criando uma variável agora para tornar nosso código mais simples e para que possamos colocar um valor (dado) dentro dele para ser acessado posteriormente]:

export Context = React.createContext();

'Context' é um objeto de contexto criado chamando 'createContext'. O objeto de contexto contém um componente chamado Provider que agora poderemos chamar e depois passar as variáveis ​​e funções que queremos manter em nosso nível 'global'.

2. Com nossa variável ‘Contexto’, vamos agora pular para nosso JSX na instrução de retorno. Aqui chamaremos ‘Contexto’ e o colocaremos em tags de abertura (colchetes angulares), e também chamaremos Provider assim:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Para completar 'Context.Provider', também precisamos fornecer um valor para 'Provider'. É aqui que passaremos um objeto com toda e qualquer variável e função que chamaremos com 'Contexto' nos componentes filhos:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

É MUITO IMPORTANTE observar que precisamos colocar TODOS os componentes filhos que usarão as variáveis ​​e funções entre as tags. Por exemplo:

return(
    
);

Observe que não precisamos passar nenhum adereço diretamente para os componentes filhos (como faríamos com 'useState'), desde que coloquemos os adereços dentro de 'value'.

Agora que usamos createContext e passamos todos os nossos itens globais para 'Context.Provider', estamos prontos para passar para os componentes filhos e ver como usar 'Context'.

3. Vamos para um componente filho que (para este exemplo) está alojado no arquivo "Child.js". Como é a vida com a codificação: se você quiser usar algo, você precisa importá-lo. Vamos em frente e obter ‘Contexto’ de onde o declaramos em ‘Parent.js’ para que possamos usá-lo neste componente filho (‘Child.js’):

import Context from ‘./Parent.js’;

4. Agora que temos acesso a ‘Context’ no componente filho, precisamos importar ‘useContext’ para o arquivo para que possamos passar ‘Context’ para ele (mais sobre isso em breve):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. Ótimo! Agora vamos usar 'useContext'. Primeiro precisamos declarar uma variável para usar 'useContext'. Faremos isso dentro do componente de maneira semelhante à forma como declararíamos useState:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

Neste código, estamos usando chaves {} para denotar atribuição de desestruturação. Essa é uma maneira elegante de dizer que somos capazes de chamar múltiplas variáveis ​​e funções armazenadas em Context. Também estamos passando ‘Context’ para ‘useContext’ para que possamos acessar os valores definidos em Context.Provider (que declaramos em ‘Parent.js’).



6. Acredite ou não, está tudo pronto! Agora você pode usar os valores de contexto em seu código da mesma forma que usaria normalmente o Estado. Por exemplo:

const expId = example.id;

ou

setExample(newExample);

Vamos recapitular:

Parabéns! Agora você tem todas as ferramentas para começar a usar createContext e useContext. Você entende que useContext permite criar algo como um 'estado global' que pode passar variáveis ​​​​e funções para componentes sem passar adereços diretamente através de componentes filhos.

Também nos aprofundamos nas seis etapas necessárias para fazer o contexto funcionar em seus aplicativos. Agora você está pronto para começar a codificar com createContext e useContext, mas caso precise de um guia de início rápido, aqui está:

No seu componente pai, declare e exporte uma variável chamada 'Context' usando 'createContext':

export const Context = React.createContext();

No JSX do componente pai, envolva todos os componentes filhos que precisam de acesso ao contexto em Context.Proivder e passe quaisquer variáveis/funções dentro de um objeto:

   //Child components

No seu componente filho, importe 'useContext':

import React, { useContext } from ‘react’;

Importe também ‘Contexto’ do componente pai:

import Context from “./Parent.js’;

Em seguida, use useContext e passe sua variável ‘Context’:

const { example, handleExample } = useContext(Context);

Por fim, use o contexto ao qual você agora tem acesso (em nossos exemplos acima, isso seria 'example' e 'handleExample') da maneira que for necessária no componente filho.

Bom trabalho! E até a próxima, boa codificação!

Uma última observação: se você quiser se aprofundar neste assunto, aqui estão os recursos de documentação oficial que também mencionei enquanto aprendia useContext e escrevia este blog:

Documentação Oficial:
https://react.dev/reference/react/createContext

Documentação oficial legada, ainda um tanto útil para a compreensão de useContext:https://legacy.reactjs.org/docs/context.html