Índice

1. Pré-requisitos
2. Instalação
3. Introdução
4. O que são ganchos personalizados?
5. Quando você deve criar um gancho personalizado?
6. Exemplo: Criando um gancho personalizado
   • Etapa 1: Identifique a lógica reutilizável
   • Etapa 2: Extraindo lógica para um gancho personalizado
   • Etapa 3: usando o gancho personalizado
7. Benefícios dos ganchos personalizados
8. Práticas recomendadas para ganchos personalizados
9. Conclusão

Pré-requisitos:

Certifique-se de ter o conhecimento prévio necessário nestes:

Conhecimento básico de React
Node.js e npm

Instalação:

Para começar com um novo projeto React usando Vite, siga estas etapas:

eu. Abra seu terminal e execute o seguinte comando para criar um novo projeto:

   npm create vite@latest my-react-app --template react

ii. Navegue até o diretório do seu projeto:

     cd my-react-app

iii. Instale dependências: Instale os pacotes necessários para o seu projeto:

   npm install

4. Inicie o servidor de desenvolvimento: Execute o servidor de desenvolvimento:

    npm run dev

Seu aplicativo React agora estará em execução e você poderá visualizá-lo em seu navegador em http://localhost:5173.

Introdução:

O que são ganchos React?:

React hooks são funções especiais que permitem usar estado e outros recursos do React em componentes funcionais. Ganchos como useState e useEffect são essenciais para gerenciar o estado e os efeitos colaterais.

O que são ganchos personalizados?:

ganchos personalizados podem ser descritos como uma forma de reutilizar a lógica em vários componentes. Em vez de repetir o código, você pode encapsulá-lo em um gancho personalizado, tornando seus componentes mais limpos e seu código mais fácil de gerenciar. assim como os ganchos React ao usar ganchos personalizados, certifique-se de iniciar o nome do componente com (use seguido do nome que deseja dar ao componente, por exemplo, useFetchData).useFetchData pode ser um gancho personalizado que busca dados de uma API e os retorna para o seu componente.

entendendo Ganchos?

Compreendendo os ganchos:
Ganchos como useState, useEffect e useContext permitem usar o estado e outros recursos do React sem escrever uma classe. Eles são blocos de construção que permitem lidar com a lógica dos componentes de maneira modular.

Quando você deve criar um gancho personalizado?

Ganchos personalizados permitem reutilizar lógica com estado em diferentes componentes. Um exemplo simples é um componente contador, que possui funcionalidade de incremento, decremento e redefinição. Se você precisar da mesma lógica em vários componentes, a lógica pode ser movida para um gancho personalizado. Outro exemplo comumente usado é um componente que busca dados de uma API e, se você precisar da mesma lógica em vários componentes, poderá mover essa lógica para um gancho personalizado.

Exemplo de criação de um gancho personalizado

Exemplo: vamos criar um aplicativo de contador simples com React hook(useState).in app.jsx

Etapa 1: identificar a lógica reutilizável

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev   1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    

      

        
Counter App 
        
{counterstate}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

no código acima, a lógica reutilizável inclui contraestado, estado inicial (o), incremento, decremento e função de redefinição. o incremento adiciona 1 ao estado inicial, enquanto o decremento subtrai 1 do estado inicial, enquanto a redefinição redefine o primeiro estado inicial.

Etapa 2: extrair lógica em um gancho personalizado

podemos criar uma pasta na pasta src chamada Hooks e, em seguida, um arquivo chamado useCouter.jsx para o gancho personalizado, conforme mostrado abaixo.

importar React, { useState } de "react"; const useCounter = (valor inicial) => { const [valor, setValue] = useState(valor inicial); incremento constante = () => { setValue((anterior) => anterior 1); }; decremento const = () => { setValue((anterior) => anterior - 1); }; const redefinir = () => { setValue(valor inicial); }; return { valor, incremento, decremento, reset }; }; exportar useCounter padrão;

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Etapa 3 usando o gancho personalizado

agora, vamos usar nosso gancho personalizado em App.jsx.

importar React, { useState } de "react"; importar "./App.css"; importar useCounter de "./Hooks/useCounter"; função Aplicativo() { const { valor, incremento, decremento, redefinição } = useCounter (0); retornar ( ); } exportar aplicativo padrão;

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Exemplo 2.

Vamos criar um gancho personalizado useFetch para todas as chamadas de API.

importar React, { useState, useEffect } de "react"; const useFetch = (url) => { const [dados, setData] = useState(null); const [erro, setError] = useState(null); const [carregando, setLoading] = useState(true); useEffect(() => { const fetchData=async()=>{ tentar { resposta const = aguarda busca (url); const jsonData = aguardar resposta.json(); setData(jsonData); } pegar (erro) { setError(erro); } finalmente { setLoading(falso); } }; buscarDados(); }, [URL]); return {dados, erro, carregamento}; }; exportar useFetch padrão;

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

uso

no App.jsx, podemos usar este gancho personalizado para buscar um nome de usuário do espaço reservado JSON, conforme mostrado abaixo;

importar React, { useState } de "react"; importar "./App.css"; importar useCounter de "./Hooks/useCounter"; importar useFetch de "./Hooks/useFetch"; função Aplicativo() { const { valor, incremento, decremento, redefinição } = useCounter (0); const {dados, erro, carregamento} = useFetch( "https://jsonplaceholder.typicode.com/users" ); retornar ( ); } exportar aplicativo padrão;

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Benefícios dos ganchos personalizados

Reutilização:

Um dos principais benefícios é a reutilização. Você pode usar o mesmo gancho personalizado em vários componentes, reduzindo a duplicação de código.

Separação de preocupações:

Ganchos personalizados ajudam a separar a lógica da IU. Seus componentes se concentram na renderização, enquanto os ganchos personalizados cuidam da lógica.

Componentes mais limpos:

Ao mover lógica complexa para ganchos personalizados, seus componentes se tornam mais simples e fáceis de entender.

Melhores práticas para ganchos personalizados

Convenções de nomenclatura:

Os ganchos personalizados devem começar com a palavra "use" para seguir a convenção de nomenclatura do React. Isso também ajuda a identificar ganchos rapidamente em seu código.

Exemplo: useFetch, useForm, useAuth.

Tratamento de dependências:

Ao usar ganchos como useEffect dentro de um gancho personalizado, certifique-se de lidar com as dependências corretamente para evitar bugs ou novas renderizações desnecessárias.

Evitando novas renderizações desnecessárias:

Otimize seus ganchos personalizados memorizando valores ou usando ganchos como useCallback e useMemo para evitar a repetição de cálculos caros ou a nova busca de dados.

Conclusão

exploramos o conceito de ganchos personalizados e seu papel na simplificação e aprimoramento do desenvolvimento de aplicativos React. Ao criar ganchos personalizados, você pode encapsular e reutilizar lógica com estado, o que ajuda a manter seus componentes limpos e fáceis de manter.

Confira o projeto no GitHub: Meu Repositório GitHub