A API do React Context é uma ferramenta de gerenciamento de estado usada para compartilhar dados entre os componentes do React. Descubra como usar a Context API para acompanhar usuários autenticados em componentes funcionais.

O que é a API do React Context?

React é uma biblioteca baseada em componentes. Suas aplicações compreendem componentes diferentes que trabalham juntos. Em alguns casos, seu aplicativo precisa compartilhar dados entre esses componentes.

Por exemplo, você pode querer compartilhar o nome de usuário do usuário atual do Conecte-se componente para outros componentes em seu aplicativo. Contexto facilita o compartilhamento do nome de usuário, eliminando a necessidade de passar dados por meio de cada componente na árvore de componentes.

Quando você deve usar a API do React Context?

Antes de usar o contexto React, primeiro, considere o tipo de dados com os quais você está trabalhando. O contexto é mais adequado para dados estáticos. Dados que mudam continuamente causarão muitas rerenderizações e, como resultado, reduzirão o desempenho. Os dados também devem ser globais ou pelo menos usados ​​por muitos componentes, por exemplo, dados como idioma do usuário, temas e autenticação.

Usando o contexto para acompanhar o status de autenticação do usuário

Se seu aplicativo usa autenticação, muitos de seus componentes precisarão saber o estado de autenticação do usuário atual. Passar o status de autenticação para cada componente é redundante e leva à perfuração de prop, portanto, usar o contexto é uma boa opção.

criarContext()

Para começar com a Context API, primeiro você precisa criá-la usando esta sintaxe.

const Contexto = React.createContext (defaultValue);

O valor padrão é desnecessário e geralmente é usado para fins de teste.

Fornecedor

Cada contexto possui um provedor que recebe um valor consumido pelos componentes que ele envolve. Ele permite que esses componentes assinem alterações de contexto.

useContext

useContext() é um Gancho de reação que permite que os componentes consumam contexto. Você só precisa passar no contexto.

const contextValue = useContext (Contexto)

Vamos agora criar o contexto de autenticação para acompanhar o estado de autenticação.

Comece criando um novo arquivo, AuthContext.js, e adicione o seguinte.

import { createContext } de "reagir";
const AuthContext = createContext();
exportar AuthContext padrão;

A seguir, crie AuthProvider.js e adicione a função de provedor.

import { useState, useEffect } from 'react';
import { getUser } de './auth.js'
importar AuthContext de './AuthContext'
export const AuthProvider = ({ filhos }) => {
 const [usuário, setUser] = useState (null);
 useEfeito(() => {
 const usuário atual = getUsuário()
 setUser (atualUsuário)
 }, []);
Retorna (
{crianças}
 );
 };

Aqui, você está recuperando o usuário atual de um falso getUsuário() função. Em um aplicativo real, esse seria seu serviço de back-end.

Armazene o usuário no estado atual para acompanhar todas as alterações e, em seguida, passe o usuário para o provedor na propriedade de valor.

AuthProvider.js também recebe as crianças com acesso ao contexto.

A próxima etapa é criar um gancho personalizado que permitirá que os componentes agrupados com o provedor acessem o contexto.

Criar um novo arquivo useAuthContext.js e adicione o seguinte.

importe AuthContext de "./AuthContext";
const useAuthContext.js = () => {
 const usuário = useContext(AuthContext);
 if (usuário indefinido) {
 throw new Error("useAuthContext só pode ser usado dentro de AuthProvider");
 }
 usuário de retorno;
};

Agora, se o código fora do provedor chamar AuthContext, seu aplicativo tratará o erro normalmente.

A etapa final é envolver os componentes usando o contexto com AuthProvider.js.

import { AuthProvider } de "./AuthContext";
ReactDOM.render(




,
 rootElement
);

Aqui está um exemplo de como você usaria o contexto para proteger uma página de usuários não autenticados.

importe useAuthContext de "./useAuthContext";
import { Navigate } de "react-router-dom";
const Perfil = () => {
 const { usuário } = useAuthContext();
 if (!usuário) {
 Retorna ;
 }
 Retorna (
 <>
Perfil

 );
};

Este componente renderiza condicionalmente a página de perfil, dependendo do status de autenticação do usuário. Ele verifica se o usuário existe e, se não existir, redireciona-o para a página de login. Caso contrário, ele renderiza a página de perfil.

Quando não usar a API React Context

Neste artigo, você aprendeu a usar o Contexto para acompanhar um usuário autenticado nos componentes. Embora você possa ficar tentado a usar o Contexto para todos os seus casos de uso de compartilhamento de dados, não deveria, pois isso reduz a capacidade de manutenção e o desempenho do código. Toda vez que o valor de contexto muda, cada componente que consome o estado é renderizado novamente. Se os dados forem usados ​​apenas por alguns componentes, opte por adereços.

Como usar adereços no ReactJS

Leia a seguir

Sobre o autor