This content originally appeared on DEV Community and was authored by judsonkerller
Se você já trabalhou em projetos React, provavelmente percebeu que algumas lógicas são repetidas em diferentes componentes. Isso pode tornar o código menos manutenível e mais propenso a erros.
Imagine que você precise implementar um comportamento de debounce em múltiplos componentes para otimizar chamadas a uma API. Em vez de copiar e colar o mesmo código, você pode criar um custom hook (hook personalizado), centralizando a lógica e reaproveitando-a de forma elegante.
No nosso papo de hoje, vamos explorar o conceito de custom hooks, como criá-los, boas práticas, como vivem, o que comem (essas duas últimas foram zueira pessoal rsrs), e um exemplo real de um hook de debounce. Então pegue seu cafézin e rumbora aprender mais sobre hooks.
O que são Hooks Personalizados?
São funções JavaScript que utilizam os hooks padrões do React para encapsular e reutilizar lógica compartilhada entre componentes. Eles seguem a convenção de nome começando com "use" ("useDebounce").
Eles permitem separar preocupações, melhorar a legibilidade e reduzir redundância no seu código.
Criando um Hook Personalizado: useDebounce
Vamos criar um hook que atrasa a execução de uma função até que o usuário pare de digitar por um tempo determinado.
import { useState, useEffect } from 'react';
function useDebounce<T>(value: T, delay: number): T {
const [debounceValue, setDebounceValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebounceValue(value);
}, delay)
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debounceValue;
}
export { useDebounce };
Agora, podemos usar o hook personalizado que acabamos de criar, dentro de um componente para otimizar chamadas a uma API de pesquisas, sem que seja feito uma chamada a cada vez que o usuário digitar algo no input, por exemplo.
import { useState } from "react";
import useDebounce from "./useDebounce";
function SearchInput() {
const [searchTerm, setSearchTerm] = useState("");
const debouncedSearchTerm = useDebounce(searchTerm, 500);
useEffect(() => {
if (debouncedSearchTerm) {
console.log("Buscando por:", debouncedSearchTerm);
// Aqui você pode chamar uma API, por exemplo
}
}, [debouncedSearchTerm]);
return (
<input
type="text"
placeholder="Digite sua pesquisa..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
);
}
Boas práticas ao criar Hooks Personalizados
-
Nomeie corretamente: Comece sempre com o
usepara garantir que o React reconheça como um hook. - Evite dependências desnecessárias: Utilize apenas os estados e useEffect's se realmente forem necessários para evitar re-renderizações inesperadas.
- Mantenha genérico e reutilizável: Evite hardcodes dentro do hook. Prefira passar valores via props.
- Escreva testes para seus hooks: Utilize Jest e React Testing Library para validar o comportamento esperado.
Extra: Adote a prática de por testes em todo código que você fizer, pois assim você garante o funcionamento para o qual o mesmo foi criado.
Pra finalizarmos, os hooks personalizados são uma forma poderosa de organizar e reutilizar lógica dentro do React. No exemplo que vimos hoje, transformamos uma lógica repetitiva em um hook que podemos utilizar em diversos componentes que aguardam esse comportamento, e ficou bem estruturado, falaê!? rsrs
Se você quiser se aprofundar, tente criar outros hooks personalizados, observe no seu dia a dia alguma lógica que se repete no projeto que você esteja atualmente e tente implementar - se possível, claro, dependendo do time e contexto que você esteja inserido - garanto que isso só vai trazer benefícios para você e principalmente pro seu time.
Curtiu o artigo? Curtiu o papo? Que outro hook personlizado você gostaria de ver? Deixe seu comentário!🚀
This content originally appeared on DEV Community and was authored by judsonkerller
judsonkerller | Sciencx (2025-02-03T00:37:15+00:00) Criação de Hooks Personalizados no React: Reutilização de Lógica de Forma Inteligente. Retrieved from https://www.scien.cx/2025/02/03/criacao-de-hooks-personalizados-no-react-reutilizacao-de-logica-de-forma-inteligente/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.