Context no React é um recurso poderoso que permite o compartilhamento de dados entre componentes sem a necessidade de passar props explicitamente em cada nível da árvore de componentes. Utilizando o Context, é possível propagar dados pela hierarquia de componentes, tornando-os facilmente acessíveis a qualquer componente, independentemente de sua posição na árvore.

Observação

Para começar, vamos analisar a sintaxe. Forneceremos um guia passo a passo, garantindo a compreensão de cada conceito ao longo do processo. A aplicação de context exige implementação de código específica em diferentes níveis de componentes. Após cobrirmos detalhadamente a sintaxe, avançaremos para um exemplo prático.

Sintaxe:

1º passo: Criar um novo Context utilizando a função createContext() da biblioteca React e atribuí-lo a uma variável. Isso deve ser feito no nível superior da aplicação. Normalmente, realiza-se esse procedimento em um arquivo separado (por exemplo, context.js). Este arquivo será responsável pelo objeto Context.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

2º passo: No arquivo App, envolvemos todos os componentes que precisam acessar os dados compartilhados com o componente Provider do Context criado. O componente Provider permite definir o valor do contexto e disponibilizá-lo para todos os componentes filhos que consomem esse contexto.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

3º passo: No arquivo App, também devemos fornecer os dados do contexto. Isso é feito utilizando a propriedade value do componente Context.Provider. Atribuímos todos os dados necessários à propriedade value.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

4º passo: Nos componentes filhos (ChildCompOne ou ChildCompTwo), é possível acessar os dados compartilhados utilizando o hook useContext. Para utilizar o hook useContext, é necessário passar o Context criado no arquivo context.js como argumento.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Código completo do aplicativo:

Nota

Reserve um momento para revisar cada etapa, abrindo cada arquivo e pasta, para garantir que compreende claramente o processo. O próximo capítulo continuará com um exemplo combinando Context e hooks. Isso permitirá que você veja como esses conceitos funcionam juntos na prática.