Uma introdução à API React Context

Aprenda como compartilhar dados entre vários componentes da maneira certa.

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

O que é a API React Context?

React é uma biblioteca baseada em componentes. Suas aplicações compreendem diferentes componentes que funcionam juntos. Em alguns casos, a sua aplicação precisa de partilhar dados entre estes componentes.

Por exemplo, você pode querer compartilhar o nome de usuário do usuário atual do componente Login com outros componentes do seu aplicativo. O contexto facilita o compartilhamento do nome de usuário, eliminando a necessidade de passar dados por cada componente na árvore de componentes.

Quando você deve usar a API 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 novas renderizaçõ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 o seu aplicativo usar autenticação, muitos de seus componentes precisarão saber o estado de autenticação do usuário atual. Transmitir o status de autenticação para cada componente é redundante e leva ao detalhamento de suporte, portanto, usar o contexto é uma boa opção.

criarContext()

Para começar a usar a API Context, 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 contexto possui um provedor que recebe um valor consumido pelos componentes que ele encapsula. Ele permite que esses componentes assinem alterações de contexto.

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

useContext

useContext() é um gancho React que permite que os componentes consumam contexto. Você só precisa passar no contexto.

const contextValue = useContext(Context)

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 } from "react";
const AuthContext = createContext();
export default AuthContext;

Em seguida, crie AuthProvider.js e adicione a função do 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ê está recuperando o usuário atual de uma função getUser() falsa. Em uma aplicação real, este seria o seu serviço de back-end.

Armazene o usuário no estado atual para acompanhar quaisquer alterações e depois passe o usuário para o provedor na proposta de valor.

AuthProvider.js também recebe os filhos com acesso ao contexto.

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

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

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á o erro normalmente.

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

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

Aqui está um exemplo de como você usaria o contexto para proteger uma página 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>
    </>
  );
};

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, caso não exista, o redireciona para a página de login. Caso contrário, renderiza a página de perfil.

Quando não usar a API React Context

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