Dominando o useContext: um mergulho profundo na API Context do React

Hoje discutiremos o uso do gancho useContext no React, que permite o compartilhamento eficiente de dados entre componentes e simplifica a comunicação de componentes

O useContextgancho no React permite o compartilhamento eficiente de dados entre componentes sem a necessidade de perfuração de props.
Ele simplifica a comunicação de componentes, fornecendo uma maneira de os componentes acessarem o estado global sem ter que passar props por vários níveis de componentes.
Isso resulta em uma base de código mais organizada e sustentável, bem como em desempenho aprimorado, evitando reprocessamentos desnecessários. Além disso, useContext pode ser usado como uma alternativa a outras bibliotecas de gerenciamento de estado, como Redux.

Aqui está um exemplo de como usar o useContextgancho em um componente React:

import React, { useContext } from 'react';

// Create the context
const MyContext = React.createContext();

// Provide a context value
function MyProvider({ children }) {
  const [value, setValue] = React.useState("Hello, World!");
  const providerValue = { value, setValue };
  return <MyContext.Provider value={providerValue}>{children}</MyContext.Provider>;
}

function MyComponent() {
  // Use the context
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
        <p>{value}</p>
        <button onClick={() => setValue('Hello, React!')}>Change Value</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

O MyProvidercomponente é um componente que fornece um valor para o contexto. Ele usa o useStategancho para definir um valor inicial para o contexto. O MyProvidercomponente então renderiza um MyContext.Providerelemento, que envolve seus filhos e fornece o valor para o contexto. Os valuee setValuesão passados ​​como um único objeto para o provedor.

O MyComponentcomponente é um componente que consome o valor do contexto usando o useContextgancho. O useContextgancho é chamado com o objeto de contexto que criamos anteriormente e retorna o valor atual do contexto. Neste exemplo, o valor do contexto é uma string, mas pode ser qualquer tipo de dado.

O MyComponentcomponente então renderiza um elemento div com um elemento de parágrafo que exibe o valor do contexto e um elemento de botão, quando o botão é clicado, ele chama a função setValue, que irá alterar o valor do contexto e renderizar novamente o componente para exibir o valor atualizado.

Por fim, o Appcomponente é o componente de nível superior que renderiza o MyProvidercomponente e o MyComponentcomponente. Este componente é responsável por fornecer o valor de contexto ao MyProvidercomponente e renderizá- MyComponentlo.

Quando o componente App é renderizado, ele renderiza o componente MyProvider, que define o valor para o contexto, e o componente MyComponent, que recupera o valor do contexto usando o useContextgancho.

Com este exemplo, você pode ver como o useContextgancho permite que você compartilhe facilmente valores entre componentes sem ter que passar os valores por vários níveis da árvore de componentes.

Espero que gostem

Codificação feliz!

quero dar sugestões:-

me encontre no LinkedIn Twitter

Envie-me um e-mail para [email protected]