Principais Hooks do React

18/06/2024

Um hook no React é uma função especial que permite que você utilize funcionalidades do React, como estado e ciclo de vida, em componentes funcionais. Antes da introdução dos hooks no React 16.8, essas funcionalidades só estavam disponíveis em componentes de classe. Os hooks permitem que você escreva componentes de forma mais simples e reutilizável.

Principais Hooks do React

useState: Permite adicionar estado a componentes funcionais.
useEffect: Lida com efeitos colaterais, como assinaturas, fetching de dados e manipulação do DOM.
useContext: Permite acessar o contexto do React e compartilhar valores entre componentes sem prop drilling.
useReducer: Gerencia estados complexos com lógica semelhante ao Redux.
useCallback: Memoiza funções, útil para otimização de desempenho.
useMemo: Memoiza valores computados, evitando cálculos desnecessários.
useRef: Cria referências mutáveis, geralmente usadas para acessar diretamente elementos DOM.
useLayoutEffect: Similar ao useEffect, mas é executado de forma síncrona após todas as mutações do DOM.
useImperativeHandle: Personaliza o valor da referência exposta ao usar forwardRef.

Exemplos de Uso

useState

import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

useEffect

import React, { useEffect, useState } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(interval);
}, [count]);
return <div>{count}</div>;
}

Vantagens dos Hooks

Simplicidade: Reduz a complexidade dos componentes de classe, tornando o código mais legível e fácil de entender.
Reuso de Lógica: Hooks permitem compartilhar lógica de estado entre componentes sem modificar sua estrutura hierárquica.
Melhoria de Desempenho: Hooks como useMemo e useCallback ajudam a otimizar componentes evitando cálculos e renderizações desnecessárias.

Regras dos Hooks

Chamadas de Hooks no Topo: Chame hooks no topo do seu componente funcional. Não os chame dentro de loops, condições ou funções aninhadas.
Somente em Componentes de Função: Use hooks apenas em componentes funcionais e custom hooks. Não os use em funções JavaScript regulares.

Custom Hooks

Você também pode criar seus próprios hooks para encapsular e reutilizar lógica complexa.

import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);
return data;
}
function App() {
const data = useFetch('https://api.example.com/data');
return (
<div>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
</div>
);
}

Agora você ja entendeu que Hooks são uma adição poderosa ao React que permitem que você adicione estado e outras funcionalidades aos componentes funcionais, mantendo o código limpo e organizado. Eles oferecem uma maneira eficiente de gerenciar a lógica de estado e efeitos colaterais, tornando o desenvolvimento com React mais flexível e modular.

Autor: José Darci Rodrigues Junior