Como usar o useContext para compartilhar dados – SIMPLIFICANDO OS HOOKS DO REACT

O React é uma das bibliotecas mais populares para a criação de interfaces de usuário. Uma das características mais poderosas do React é a capacidade de criar componentes reutilizáveis que podem compartilhar dados uns com os outros. O useContext é um dos hooks do React que permite compartilhar dados entre componentes sem a necessidade de tantos níveis de hierarquia.

Para usar o useContext, primeiro precisamos criar um contexto utilizando o createContext. Em seguida, podemos utilizar o useContext dentro de um componente para acessar os dados compartilhados pelo contexto.

Vamos ver um exemplo de como usar o useContext para compartilhar dados entre componentes:

        
import React, { createContext, useContext } from 'react';

// Criando o contexto
const MyContext = createContext();

// Componente que fornece os dados
const ParentComponent = ({ children }) => {
  const data = {
    nome: 'Eva',
    idade: 29
  };

  return (
    
      {children}
    
  );
};

// Componente que consome os dados
const ChildComponent = () => {
  const data = useContext(MyContext);

  return (
    

      
Nome: {data.nome}
      
Idade: {data.idade}
    
  );
};

// Uso dos componentes
const App = () => (
  
    
  
);

export default App;
        
    

Neste exemplo, criamos um contexto utilizando o createContext e fornecemos os dados utilizando o MyContext.Provider. Em seguida, utilizamos o useContext dentro do ChildComponent para acessar os dados compartilhados pelo contexto.

O uso do useContext simplifica a forma como compartilhamos dados entre componentes no React. Com ele, podemos acessar os dados diretamente, sem precisar passar os dados através de vários níveis de hierarquia de componentes.

Espero que este artigo tenha sido útil para entender como usar o useContext para compartilhar dados e simplificar os hooks do React. Caso tenha alguma dúvida, deixe seu comentário abaixo!