Introdução

A API Context do React permite que você compartilhe dados globalmente em seu aplicativo, enquanto os Hooks fornecem uma maneira de gerenciar o estado e os efeitos colaterais sem a necessidade de componentes de classe. Juntos, eles simplificam o manuseio de dados e tornam seu código mais fácil de manter. Neste artigo, nos aprofundaremos no contexto e nos ganchos do React, fornecendo um exemplo detalhado e passo a passo para ajudá-lo a compreender e implementar esses recursos perfeitamente em seus projetos.

O que é contexto de reação?

React Context é um recurso poderoso para compartilhar valores entre componentes sem perfuração de suporte. Ele fornece uma maneira de passar dados pela árvore de componentes sem ter que passar acessórios manualmente em todos os níveis.

Principais benefícios do contexto React

• Simplifica o gerenciamento de estado: Não há necessidade de passar acessórios para vários níveis.
• Melhora a legibilidade do código: Torna sua árvore de componentes mais limpa.
• Incentiva a reutilização: os valores de contexto podem ser facilmente reutilizados em diferentes partes do aplicativo.

O que são ganchos de reação?

React Hooks permitem que você use estado e outros recursos do React sem escrever uma classe. Introduzidos no React 16.8, os Hooks fornecem uma API mais direta para os conceitos do React que você já conhece.

Ganchos comumente usados

• useState: gerencia o estado em um componente funcional.
• useEffect: Lida com efeitos colaterais em componentes funcionais.
• useContext: acessa o valor de um contexto.

Configurando um projeto React

Antes de mergulharmos na implementação, vamos configurar um projeto React. Se ainda não o fez, você pode criar um novo aplicativo React usando Create React App:

npx create-react-app context-hooks-example
cd context-hooks-example
npm start

Isso configurará um novo aplicativo React e iniciará o servidor de desenvolvimento.

Criando um Contexto

Vamos começar criando um novo contexto. Neste exemplo, criaremos um contexto simples para gerenciar as informações de um usuário.

// src/UserContext.js
import React, { createContext, useState } from 'react';

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    
      {children}
    
  );
};

No código acima, criamos um componente UserContext e um componente UserProvider. O componente UserProvider usa o gancho useState para gerenciar as informações do usuário e passa o estado do usuário e a função setUser como o valor de contexto.

Usando Contexto em Componentes

Agora que configuramos nosso contexto, vamos usá-lo em nossos componentes.

Acessando o contexto em um componente

Para acessar o contexto em um componente, usamos o gancho useContext. Veja como você pode fazer isso:

// src/components/UserProfile.js
import React, { useContext } from 'react';
import { UserContext } from '../UserContext';

const UserProfile = () => {
  const { user } = useContext(UserContext);

  return (
    

      
User Profile
      
Name: {user.name}
      
Age: {user.age}
    
  );
};

export default UserProfile;

Neste exemplo, o componente UserProfile acessa as informações do usuário a partir do contexto e as exibe.

Atualizando dados de contexto

Para atualizar os dados de contexto, usamos a função setUser fornecida pelo contexto.

// src/components/UpdateUser.js
import React, { useContext } from 'react';
import { UserContext } from '../UserContext';

const UpdateUser = () => {
  const { setUser } = useContext(UserContext);

  const updateUserInfo = () => {
    setUser({ name: 'Jane Doe', age: 25 });
  };

  return (
    

      
Update User
      Update
    
  );
};

export default UpdateUser;

No componente UpdateUser, definimos uma função updateUserInfo que atualiza as informações do usuário usando a função setUser do contexto.

Integrando Contexto e Componentes

A seguir, vamos integrar nosso contexto e componentes ao aplicativo principal.

// src/App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './components/UserProfile';
import UpdateUser from './components/UpdateUser';

const App = () => {
  return (
    

        
React Context and Hooks Example
        
    
  );
};

export default App;

No componente App, agrupamos nossos componentes UserProfile e UpdateUser com o UserProvider. Isso disponibiliza o contexto para todos os componentes do UserProvider.

Perguntas frequentes

Quais são as principais vantagens de usar a API Context?

O uso da API Context simplifica o gerenciamento de estado, reduzindo a necessidade de perfuração de suporte. Isso torna seu código mais limpo e fácil de manter, permitindo que você compartilhe o estado entre vários componentes com eficiência.

Como os ganchos melhoram a funcionalidade do contexto?

Hooks como useState e useContext facilitam o gerenciamento e o acesso a valores de contexto em componentes funcionais. Eles fornecem uma maneira mais intuitiva e direta de lidar com efeitos colaterais e de estado em comparação com componentes de classe.

Posso usar vários contextos em um único componente?

Sim, você pode usar vários contextos em um único componente chamando useContext com diferentes objetos de contexto. Isso permite que você gerencie diferentes partes do estado de forma independente dentro do mesmo componente.

Como faço para depurar problemas relacionados ao contexto?

Para depurar problemas relacionados ao contexto, você pode usar React DevTools, que fornece uma maneira de inspecionar os valores de contexto e a árvore de componentes. Certifique-se de que seu provedor esteja agrupando corretamente os componentes que precisam de acesso ao contexto.

Conclusão

React Context e Hooks oferecem uma combinação poderosa para gerenciar estado e transmitir dados em seu aplicativo. Seguindo este exemplo passo a passo, você pode aproveitar esses recursos para construir aplicativos React mais eficientes e fáceis de manter. Lembre-se de usar a API de contexto para evitar perfuração de suporte e ganchos para gerenciar o estado e os efeitos colaterais de maneira eficaz.