O gancho do React useContexté uma ferramenta poderosa para compartilhar estado entre componentes sem ter que passar dados por uma longa cadeia de props. Com o useContext, você pode facilmente compartilhar o estado em toda a árvore de componentes, tornando-o uma ferramenta útil para gerenciar o estado global.

Neste artigo, exploraremos os fundamentos do useContextgancho e veremos como podemos usá-lo para gerenciar o estado em nossos aplicativos React.

O que é useContext?

useContexté um gancho interno do React que permite consumir dados de um contexto que foi criado por um componente pai. Um contexto é um objeto que contém alguns dados de estado compartilhados que podem ser acessados ​​por qualquer componente que seja descendente do componente que criou o contexto.

O useContextgancho recebe um objeto de contexto como seu argumento e retorna o valor atual desse contexto. Isso significa que qualquer atualização no contexto acionará automaticamente uma nova renderização de todos os componentes que o consomem.

Como usar useContext?

Para usar useContext, primeiro precisamos criar um objeto de contexto. Podemos fazer isso usando o createContextmétodo da Reactbiblioteca. Aqui está um exemplo:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

O Appcomponente está envolvendo seus componentes filhos no MyContext.Providercomponente e passando o valor atual do estado compartilhado como valueprop. Nesse caso, o valor é um objeto contendo o countestado e a setCountfunção.

O Countercomponente está consumindo o MyContextobjeto usando o useContextgancho e extraindo o countestado e a setCountfunção do objeto de contexto. Estamos então usando a incrementfunção para atualizar o estado compartilhado quando o botão é clicado.

Quando usar useContext?

useContexté mais útil para gerenciar o estado global que precisa ser acessado por vários componentes em todo o aplicativo. É uma boa escolha para casos em que a perfuração de suporte seria complicada ou onde você deseja evitar a passagem de estado por várias camadas de componentes.

useContexttambém é uma boa escolha para casos em que você precisa passar funções pela árvore de componentes. Ao passar uma função pelo objeto de contexto, você pode evitar ter que passá-la por várias camadas de componentes.

Conclusão

O useContextgancho é uma ferramenta poderosa para gerenciar o estado global.

Espero que isso explique a todos vocês.