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(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 (
type="text"
placeholder="Digite sua pesquisa..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
);
}
Boas práticas ao criar Hooks Personalizados
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 personalizado você gostaria de ver? Deixe seu comentário!🚀
More...
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(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 (
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 use para 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 personalizado você gostaria de ver? Deixe seu comentário!🚀
More...