Introdução à Context API do React

Saiba como compartilhar dados em vários componentes da maneira certa. React Context API é uma ferramenta de gerenciamento de estado para compartilhar dados entre componentes React. Saiba como usar a Context API para rastrear usuários autenticados em componentes funcionais.

O que é a React Context API?

React é uma biblioteca baseada em componentes. Suas aplicações consistem em diferentes componentes que trabalham em conjunto. 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 componente Login com outros componentes em seu aplicativo. O Context facilita o compartilhamento de nomes de usuários, eliminando a necessidade de passar dados por meio de cada componente na árvore de componentes.

Quando devo usar a React Context API?

Antes de trabalhar com Context React, primeiro considere o tipo de dados com os quais você está trabalhando. O contexto é melhor para dados estáticos. Dados em constante mudança podem causar muitas re-renderizações, reduzindo o desempenho. Os dados também devem ser globais ou pelo menos usados ​​por muitos componentes, como dados como idioma do usuário, temas e autenticação.

Acompanhe o status de autenticação do usuário com Context

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

createContext()

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

const Context = React.createContext(defaultValue);

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

Fornecedor

Cada Context possui um provedor que recebe os valores utilizados pelos componentes que ele encerra. Ele permite que esses componentes assinem alterações de Context.

<Context.Provider value={/* some value */}>

useContext()

useContext() é um gancho(hook) React que permite que componentes usem Context. Você só precisa passar no Context.

const contextValue = useContext(Context)

Agora vamos criar um Context de autenticação para acompanhar o status de autenticação.

Comece criando um novo arquivo, AuthContext.js, e adicione o conteúdo a seguir.

import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;

Em seguida, crie AuthProvider.js e adicione a função de provedor.

import { useState, useEffect } from 'react';
import { getUser } from './auth.js'
import AuthContext from './AuthContext'
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
const currentUser = getUser()
setUser(currentUser)
}, []);
return (
<AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
);
};

Aqui você recupera o usuário atual de uma função getUser() falsa. Em um aplicativo real, este 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 no atributo value.

AuthProvider.js também recebe filhos com acesso ao Context.

A próxima etapa é criar um gancho(hook) personalizado que permita que os componentes agrupados com o provedor acessem o Context.

Crie um novo arquivo useAuthContext.js e adicione o conteúdo a seguir.

import AuthContext from "./AuthContext";
const useAuthContext.js = () => {
const user = useContext(AuthContext);
if (user === undefined) {
throw new Error("useAuthContext can only be used inside AuthProvider");
}
return user;
};

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

A etapa final é envolver o componente com o Context e o AuthProvider.js.

import { AuthProvider } from "./AuthContext";
ReactDOM.render(
 <React.StrictMode>
 <AuthProvider>
 <App />
 </AuthProvider>
 </React.StrictMode>,
 rootElement
);

Abaixo está um exemplo de como Context podem ser usados ​​para proteger páginas de usuários não autenticados.

import useAuthContext from "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profile = () => {
 const { user } = useAuthContext();
 if (!user) {
 return <Navigate replace to="/login" />;
 }
 return (
 <>
 <h1>Profile</h1>
 </>
 );
};

Esse componente renderiza condicionalmente uma página de perfil com base no status de autenticação do usuário. Ele verifica se o usuário existe e se não o redireciona para a página de login. Caso contrário, ele renderiza a página de perfil.

Quando não usar a React Context API

Neste artigo, você aprendeu como usar o Context para rastrear usuários autenticados em um componente. Embora você possa ficar tentado a usar o Context para todos os casos de uso de compartilhamento de dados, não deveria, pois isso reduz a capacidade de manutenção e o desempenho do código. Cada componente que consome o estado é renderizado novamente toda vez que o valor de context é alterado. Escolha adereços se os dados forem usados ​​apenas por determinados componentes.

Conteúdo base: Context React

Leia também: Tutorial de MySQL para iniciantes