Forem: Everton Reis

Introduction to React Context - How to use it simply

Everton Reis — Thu, 08 Jul 2021 18:16:20 +0000

Considerations

This is an introductory article and presents a way to use the React Context.
It is important that you consult the references to better understand the concepts and when it is useful to use them.
Using the context API requires at least basic React knowledge (creating reusable components, state manipulation, props...).

What is the Context API?

If we access the React Context documentation we will have the following definition:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Basically we have the following - Context provides a way to pass data between components without having to manually pass through all levels.

But what does it mean?

Data in React is usually passed to components via props, from parent to child. If you have components that are nested in a more complex way, it can be tricky to deal with this data passing between components. And that's where the Context API comes in. Simply, instead of accessing, for example, a state directly from the component or passing through props, you can now access that same state globally.

How to use?

For better understanding you can access the code on CodeSandbox

In the example below we will have:

A file containing the entire Context Api configuration
How to retrieve data typed in input into different components
Two components that will be updated with the values entered in the input

Creating User Context

In the context file is where we create a global variable that can be accessed in every application. The context provider is used to involve a parent component and each child that exists in the application.

For this we will create the useContext.js file, which is where the context instance and the variables to be used will be created.

In useContext.js, create the context object by importing and using createContext

import React, { createContext, useState } from "react";

export const MyContext = createContext();

export const UserProvider = ({ children }) => {
  const [name, setName] = useState("");
  const [lastName, setLastName] = useState("");

  return (
    <MyContext.Provider
      value={{
        name,
        setName,
        lastName,
        setLastName
      }}
    >
      {children}
    </MyContext.Provider>
  );
};

Above we export the MyContext that will be used in the child components. useState to maintain the state of the Name and lastName variables, with their corresponding methods.
These data/variables are passed through the provider's value. The provider serves to provide context to child components.

Wrapping the App component with the created context

The index.js file is imported from the UserProvider context file useContext.js. So we're going to wrap the <App/> with the UserProvider like this:

import ReactDOM from "react-dom";
import { UserProvider } from './useContext';

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
   <UserProvider>
     <App />
   </UserProvider>,
   rootElement
);

From that moment on, all the data passed in value in our context file can be accessed in other components.

Using name and lastName data

To use the first and last name data, two components were created ComponentName.js and ComponentLastName.js. In both files it is necessary to import the MyContext from our context file and the useContext hook that will be used to set the context that we will use to access the available data. Staying like this:

nameComponent.js

import React, { useContext } from "react";
import { MyContext } from "./useContext";

const Name = () => {
  const user = useContext(MyContext);

  return (
    <div>
      <h2>
        <strong>Name</strong>: {user.name}
      </h2>
    </div>
  );
};

export default Name;

lastNameComponent.js

import React, { useContext } from "react";
import { MyContext } from "./useContext";

const LastName = () => {
  const user = useContext(MyContext);

  return (
    <div>
      <h2>
        <strong>Last Name</strong>: {user.lastName}
      </h2>
    </div>
  );
};

export default LastName;

Note that, in both components, the code was used:

const user = useContext(MyContext);

The user const will be responsible so that we can access the global variables of our context.

Updating context data

In the App.js file, we import the MyContext and using the useContext hook we will consume the data from our context. With the setName and setLastName methods retrieved from the context, we call onChange on the respective inputs so that the data is updated with each character typed by the user. Staying like this:

import React, { useContext } from "react";
import { MyContext } from "./useContext";

import Name from "./ComponentName";
import LastName from "./ComponentLastName";

import "./styles.css";

export default function App() {
  const user = useContext(MyContext);

  return (
    <div className="App">
      <div>
        <div>
          <label className="label">Name: </label>
          <input
       onChange={(event) =>
       user.setName(event.target.value)} />
        </div>
        <div>
          <label>Last Name: </label>
          <input
       onChange={(event) =>
       user.setLastName(event.target.value)}
          />
        </div>
      </div>
      <Name />
      <LastName />
    </div>
  );
}

Thus, every time a change is detected in one of the inputs, it will trigger the corresponding method, which changes the value in the context, thus updating the information in ComponentName.js and ComponentName.js.

Conclusion

In this article, we use React Context to create global variables and use them in components without having to use props.

References

React Context Doc

Connect with me

GitHub

Introdução ao React Context - Como utilizar de forma simples

Everton Reis — Tue, 01 Jun 2021 00:22:41 +0000

Considerações

Este é um artigo introdutório e apresenta uma forma de utilização do React Context.
É importante que você consulte as referencias para entender melhor os conceitos e quando se faz útil sua utilização.
O uso da context API exige ao menos os conhecimentos básicos do React (criação de componentes reutilizáveis, manipulação de estado, props...).

O que é a Context API?

Se acessarmos a documentação do React Context teremos a seguinte definição:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

A grosso modo temos o seguinte - Context fornece uma maneira de passar dados entre componentes sem ter que passar manualmente em todos os níveis.

Mas o que isso significa?
Os dados em React geralmente são passado para os componentes por meio de props, de pai para filho. Caso você tenha componentes que estejam aninhados de maneira mais complexa, pode ser complicado lidar com esses dados passando entre os componentes. E é ai que entra a Context API. De maneira bem simples, ao invés de acessar, por exemplo, um estado diretamente do componente ou passando através de props, você agora consegue acessar esse mesmo estado de forma global.

Como utilizar?

Para melhor entendimento você pode acessar o código da explicação abaixo no CodeSandbox

No exemplo abaixo nós teremos:

Um arquivo contendo toda a configuração da Context Api
Como recuperar os dados digitado no input em componentes diferentes
Dois componentes que serão atualizados com os valores digitados no input

Criando o contexto do usuário

No arquivo de contexto é onde criamos uma variável global que pode ser acessada em toda aplicação. O provedor do contexto é utilizado para envolver um componente pai e cada filho que existir na aplicação.

Para isso iremos criar o arquivo useContext.js que é onde vai ser criado a instancia do contexto e também as variáveis a serem utilizadas.

Em useContext.js, crie o objeto de contexto importando e utilizando o createContext

import React, { createContext, useState } from "react";

export const MyContext = createContext();

export const UserProvider = ({ children }) => {
  const [nome, setNome] = useState("");
  const [sobrenome, setSobrenome] = useState("");

  return (
    <MyContext.Provider
      value={{
        nome,
        setNome,
        sobrenome,
        setSobrenome
      }}
    >
      {children}
    </MyContext.Provider>
  );
};

Acima exportamos o MyContext que vai ser utilizado nos componentes filhos. O useState para manter o estado das variáveis Nome e Sobrenome, com seus métodos correspondentes.
Esses dados/variáveis são passados por meio do value do provedor. O provider serve para prover o context aos componentes filhos.

Envolvendo o componente App com o contexto criado

No arquivo index.js é feita a importação do UserProvider do arquivo de contexto useContext.js. Com isso iremos envolver o <App/> com o UserProvider dessa forma:

import ReactDOM from "react-dom";
import { UserProvider } from './useContext';

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <UserProvider>
    <App />
  </UserProvider>,
  rootElement
);

A partir desse momento todos os dados passados em value no nosso arquivo de contexto poderão ser acessados em outros componentes.

Utilizando os dados Nome e Sobrenome

Para utilizar os dados nome e sobrenome, foi criado dois componentes nomeComponent.js e sobrenomeComponent.js. Em ambos os arquivos é necessário importar o MyContext do nosso arquivo de contexto e o hook useContext que será utilizado para setar o contexto que vamos usar para acessar os dados disponibilizados. Ficando dessa forma:

nomeComponent.js

import React, { useContext } from "react";
import { MyContext } from "./useContext";

const Nome = () => {
  const usuario = useContext(MyContext);

  return (
    <div>
      <h2>
        <strong>Nome</strong>: {usuario.nome}
      </h2>
    </div>
  );
};

export default Nome;

sobrenomeComponent.js

import React, { useContext } from "react";
import { MyContext } from "./useContext";

const Sobrenome = () => {
  const usuario = useContext(MyContext);

  return (
    <div>
      <h2>
        <strong>Sobrenome</strong>: {usuario.sobrenome}
      </h2>
    </div>
  );
};

export default Sobrenome;

Perceba que, em ambos os componentes foi utilizado o código:

const usuario = useContext(MyContext);

A const usuario será a responsável para que possamos acessar as variáveis globais do nosso contexto.

Atualizando os dados do contexto

No arquivo App.js, importamos o MyContext e usando o hook useContext iremos consumir os dados do nosso contexto. Com os métodos setNome e setSobrenome recuperados do contexto, chamamos o onChange nos respectivos inputs para que os dados sejam atualizados a cada caractere digitado pelo usuário. Ficando dessa forma:

import React, { useContext } from "react";
import { MyContext } from "./useContext";

import Nome from "./nomeComponent";
import Sobrenome from "./sobrenomeComponent";

import "./styles.css";

export default function App() {
  const usuario = useContext(MyContext);

  return (
    <div className="App">
      <div>
        <div>
          <label className="label">Nome: </label>
          <input
       onChange={(event) =>
       usuario.setNome(event.target.value)} />
        </div>
        <div>
          <label>Sobrenome: </label>
          <input 
       onChange={(event) =>
       usuario.setSobrenome(event.target.value)}
          />
        </div>
      </div>
      <Nome />
      <Sobrenome />
    </div>
  );
}

Com isso, toda vez que for detectada uma alteração em um dos inputs, ele vai acionar o método correspondente, que altera o valor no contexto, assim atualizando as informações em nomeComponent.js e sobrenomeComponent.js.

Conclusão

Neste artigo, usamos o React Context para criar variaveis globais e utiliza-las nos componentes sem precisar fazer uso de props.

Referencias

React Context