React Hook - useContext §

---

O useContext é um React Hook que proporciona uma forma eficiente e simples de consumir o contexto em componentes React. O contexto é uma funcionalidade do React que permite compartilhar valores (como estados ou funções) entre componentes sem a necessidade de passar explicitamente props de componente para componente, passando os dados através da árvore de componentes.

Sintaxe §

A sintaxe básica do useContext envolve a criação de um objeto de contexto usando a função React.createContext() e, em seguida, a utilização do useContext dentro de um componente funcional para acessar os valores fornecidos pelo provedor do contexto.

import React, { createContext, useContext } from 'react';
 
const MeuContexto = createContext();
 
const ProvedorDoContexto = ({ children }) => {
  // Valor a ser fornecido pelo contexto
  const valorDoContexto = 'Valor do Contexto';
 
  return (
    <MeuContexto.Provider value={valorDoContexto}>
      {children}
    </MeuContexto.Provider>
  );
};
 
const MeuComponente = () => {
  // Utilizar o useContext para acessar o valor do contexto
  const contexto = useContext(MeuContexto);
 
  return <p>Valor do Contexto: {contexto}</p>;
};

Neste exemplo, MeuContexto é criado usando createContext() e, em seguida, é utilizado dentro de ProvedorDoContexto para envolver o componente MeuComponente. O valor do contexto ('Valor do Contexto') é fornecido através do value do provedor e acessado em MeuComponente usando useContext.

Caso de uso §

O useContext facilita o compartilhamento de valores importantes em toda a aplicação. Vamos considerar um exemplo onde o contexto é utilizado para compartilhar informações de autenticação:

import React, { createContext, useContext, useState } from 'react';
 
const AuthContext = createContext();
 
// Provedor do contexto
const AuthProvider = ({ children }) => {
  const [usuario, setUsuario] = useState(null);
 
  const fazerLogin = (nome) => {
    setUsuario({ nome });
  };
 
  const fazerLogout = () => {
    setUsuario(null);
  };
 
  return (
    <AuthContext.Provider value={{ usuario, fazerLogin, fazerLogout }}>
      {children}
    </AuthContext.Provider>
  );
};
 
const MeuComponente = () => {
  // Utilizar o useContext para acessar o valor do contexto
  const { usuario, fazerLogin, fazerLogout } = useContext(AuthContext);
 
  return (
    <div>
      {usuario ? (
        <>
          <p>Bem-vindo, {usuario.nome}!</p>
          <button onClick={fazerLogout}>Logout</button>
        </>
      ) : (
        <>
          <p>Por favor, faça login.</p>
          <button onClick={() => fazerLogin('Usuário')} >Login</button>
        </>
      )}
    </div>
  );
};
 
// Utilizar o provedor do contexto para envolver componentes
const App = () => {
  return (
    <AuthProvider>
      <MeuComponente />
    </AuthProvider>
  );
};

Neste exemplo, AuthContext é utilizado para criar um contexto que fornece informações de autenticação. O AuthProvider envolve os componentes que desejam acessar essas informações, e MeuComponente utiliza useContext(AuthContext) para interagir com o estado de autenticação.

Uso com Provedor Externo §

O useContext pode ser utilizado com um provedor externo, permitindo que componentes acessem valores de contexto de diferentes partes da árvore de componentes sem a necessidade de passar propriedades manualmente.

import React, { createContext, useContext } from 'react';
import { valorExterno } from "./dados"
 
// Criar um contexto
const MeuContexto = createContext();
 
const ProvedorExterno = ({ children, valorDoContexto }) => (
  <MeuContexto.Provider value={valorDoContexto}>
    {children}
  </MeuContexto.Provider>
);
 
const ComponenteConsumidor = () => {
  // Utilizar o useContext para acessar o valor do contexto
  const contexto = useContext(MeuContexto);
 
  return <p>Valor do Contexto: {contexto}</p>;
};
 
const App = () => (
  <ProvedorExterno valorDoContexto={valorExterno}>
    <ComponenteConsumidor />
  </ProvedorExterno>
);

Neste exemplo, ProvedorExterno serve como um provedor de contexto fora da árvore de componentes. ComponenteConsumidor consome o contexto utilizando useContext e tem acesso ao valor fornecido pelo ProvedorExterno.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)