Guia Completo dos Hooks do React
- #React
E aí, desenvolvedor! Vamos explorar todos os Hooks do React? Eles são uma adição incrível ao React 16.8 e permitem que você use o state e outros recursos do React sem escrever uma classe. Vamos explorar cada um dos Hooks e como usá-los.
useState
O useState é o Hook que nos permite adicionar o state do React a componentes funcionais.
import React, { useState } from 'react';
function Contador() {
const [count, setCount] = useState(0);
return (
<div>
<p>Você clicou {count} vezes</p>
<button onClick={() => setCount(count + 1)}>
Clique aqui
</button>
</div>
);
}
Neste exemplo, useState retorna um par: o valor do estado atual (count) e uma função que permite atualizá-lo (setCount).
O hook useState no React é comumente usado para:
- Gerenciamento de Estado Local: Permite adicionar estado reativo a componentes funcionais.
- Atualização de Estado: Fornece uma função para atualizar o estado, desencadeando uma nova renderização com o estado atualizado.
- Preservação de Estado: Preserva o estado entre as renderizações do componente.
- Inicialização de Estado: Pode ser inicializado com um valor padrão no momento da criação.
---
useEffect
O useEffect permite realizar efeitos colaterais em componentes funcionais. Ele é uma representação dos métodos componentDidMount, componentDidUpdate, e componentWillUnmount.
import React, { useState, useEffect } from 'react';
function Exemplo() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Você clicou ${count} vezes`;
});
return (
<div>
<p>Você clicou {count} vezes</p>
<button onClick={() => setCount(count + 1)}>
Clique aqui
</button>
</div>
);
}
Neste exemplo, o useEffect atualiza o título do documento após a renderização do React.
O hook useEffect no React é comumente usado para:
- Sincronizar um componente com um sistema externo.
- Modificar o DOM.
- Fazer solicitações HTTP, como buscar dados de uma API.
- Adicionar event listeners.
- Substituir os ciclos de vida componentDidMount, componentWillUnmount e componentDidUpdate em componentes de classe.
- Controlar quando um efeito deve ser executado, por exemplo, apenas quando o componente é montado, quando determinado estado é atualizado, ou a cada renderização.
---
useContext
O useContext aceita um objeto de contexto (o valor retornado de React.createContext) e retorna o valor de contexto atual.
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function Exemplo() {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
}
Neste exemplo, o useContext permite que você leia o contexto atual sem precisar usar um Consumer.
O hook useContext no React é comumente usado para:
- Compartilhar propriedades comuns entre componentes, evitando a necessidade de passar muitos props duplicados.
- Compartilhar um tema entre componentes, como um tema dark e light.
- Acessar dados do usuário em vários componentes.
- Gerenciamento de idioma.
- Autenticação, permitindo que os componentes filho acessem e alterem o status de autenticação.
- Evitar a passagem manual de informações por todos os componentes intermediários.
---
useReducer
O useReducer é geralmente preferível ao useState quando você tem lógica de estado complexa que envolve vários sub-valores. Ele também permite que você otimize componentes para desempenho em alguns casos, evitando novas capturas.
import React, { useReducer } from 'react';
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
Neste exemplo, useReducer é usado para gerenciar o estado do contador.
O hook useReducer no React é comumente usado para:
- Gerenciar estados complexos em componentes, similar ao reducer do Redux.
- Compartilhar estados entre vários componentes.
- Gerenciar estados que dependem de valores anteriores, pois o useReducer só requer que você forneça o próximo estado.
- Implementar contadores simples.
- Aplicar em listas de tarefas.
- Utilizar em formulários de Nome/E-mail.
- Criar um formulário de busca.
---
useCallback
useCallback retorna uma versão memorizada do callback que só muda se uma das dependências tiver mudado. Isso é útil quando se passam callbacks para componentes otimizados que dependem de igualdade de referência para evitar renderizações desnecessárias.
import React, { useState, useCallback } from 'react';
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
Count: {count}
<button onClick={increment}>Increase</button>
</div>
);
}
Neste exemplo, useCallback é usado para memorizar o callback increment.
O hook useCallback no React é comumente usado para:
- Gerenciar funções complexas: Evita a recriação de funções a cada renderização, economizando recursos.
- Melhorar a performance: Evita ciclos de atualização de componentes indesejados.
- Implementar funções de manipulação de eventos: Como manipuladores de cliques para botões.
- Filtrar listas: Útil quando você tem uma lista e pretende realizar uma busca instantânea nos itens dessa lista.
- Trabalhar em conjunto com outros hooks: Como o useMemo, para armazenar um valor computado.
---
useMemo
useMemo retorna um valor memorizado.
import React, { useMemo } from 'react';
function App() {
const value = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return <div>{value}</div>;
}
Neste exemplo, useMemo é usado para memorizar o valor retornado pela função computeExpensiveValue.
O hook useMemo no React é comumente usado para:
- Otimizar o desempenho: Memoriza o resultado de funções intensivas em recursos, evitando recálculos desnecessários.
- Formatar dados: Útil quando você precisa formatar dados antes de renderizá-los2.
- Filtrar dados: Pode ser usado para criar uma lista filtrada de itens a partir de uma lista existente.
- Ordenar dados: Ajuda a otimizar a ordenação de listas grandes.
- Realizar cálculos complexos: Útil para memorizar o resultado de cálculos complexos.
- Trabalhar em conjunto com outros hooks: Como o useCallback, para armazenar um valor computado.
---
useRef
useRef retorna um objeto ref mutável cuja propriedade .current é inicializada com o argumento passado (initialValue). O objeto retornado persistirá durante todo o ciclo de vida do componente.
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
Neste exemplo, useRef é usado para manter a referência ao elemento de entrada.
O hook useRef no React é comumente usado para:
- Gerenciar valores: Armazena valores mutáveis que não causam uma nova renderização quando atualizados.
- Acessar elementos do DOM: Permite acessar e modificar elementos do DOM de forma imperativa.
- Integrar com bibliotecas DOM de terceiros: Pode ser usado para integrar com bibliotecas DOM externas.
- Gerenciar foco, seleção de texto ou reprodução de mídia: Útil para manipular o foco, selecionar texto ou controlar a reprodução de mídia.
- Engatilhar animações imperativas: Pode ser usado para iniciar animações imperativas.
- Acessar as props ou o estado anterior de um componente funcional: Permite acessar as props ou o estado anterior de um componente funcional.
---
useImperativeHandle
useImperativeHandle personaliza a instância que é exposta aos pais quando usam ref.
import React, { useRef, useImperativeHandle } from 'react';
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
Neste exemplo, useImperativeHandle é usado para expor a função focus para os pais.
O hook useImperativeHandle no React é comumente usado para:
- Expor instâncias de componentes filhos: Permite que um componente pai chame métodos ou acesse propriedades da instância do componente filho diretamente.
- Personalizar o valor de uma ref: Permite customizar o valor de uma ref do elemento pai através do componente filho.
- Expor métodos específicos: É utilizado para definir quais métodos e propriedades devem ser expostos para o componente pai através da referência.
- Interagir com componentes filhos: É particularmente útil quando precisamos interagir com um componente filho a partir de um componente pai.
---
useLayoutEffect
A assinatura de useLayoutEffect é idêntica à de useEffect, mas ele dispara efeitos síncronos após todas as mutações do DOM. Use isso para ler o layout do DOM e sincronizar a renderização.
import React, { useLayoutEffect, useState } from 'react';
function Example() {
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
// Atualiza a largura da janela
function updateWidth() {
setWidth(window.innerWidth);
}
// Adiciona o evento de redimensionamento da janela
window.addEventListener('resize', updateWidth);
// Remove o evento de redimensionamento da janela
return () => window.removeEventListener('resize', updateWidth);
}, []); // Array vazio significa que este efeito não depende de nenhuma prop ou estado
return <div>A largura da janela é: {width}</div>;
}
Este exemplo usa useLayoutEffect para adicionar um ouvinte de evento que atualiza a largura da janela quando a janela é redimensionada. A largura da janela é então exibida no componente.
O hook useLayoutEffect no React é comumente usado para:
- Atualizações síncronas do DOM: Executa antes do navegador atualizar a tela, garantindo que as alterações sejam aplicadas de forma síncrona.
- Medição de elementos do DOM: Útil para medir elementos do DOM antes da atualização do navegador.
- Animações e transições: Recomendado para animar ou fazer transições de elementos.
- Prevenir inconsistências visuais: Evita que o usuário receba uma inconsistência visual ao disparar mutações do DOM de forma síncrona antes da próxima atualização.
A “pintura de tela” é um termo usado para descrever o processo do navegador de desenhar elementos na tela após qualquer alteração no DOM. É nesse momento que o usuário vê as alterações aplicadas na interface do usuário.
---
useDebugValue
useDebugValue pode ser usado para exibir uma etiqueta para Hooks personalizados em React DevTools.
import React, { useState, useEffect, useDebugValue } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
// Exibe uma etiqueta no DevTools ao lado deste Hook
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}
Neste exemplo, ChatAPI é um módulo fictício que permite assinar o status online de um amigo. Quando o componente é montado, ele se inscreve no status online do amigo e, quando é desmontado, cancela a inscrição. O useDebugValue é usado para exibir o status online do amigo no DevTools.
O hook useDebugValue no React é comumente usado para:
- Depuração de Hooks Personalizados: Permite adicionar etiquetas aos hooks personalizados para facilitar a depuração.
- Exibição de Valores: Mostra valores úteis durante a depuração no inspetor de componentes do React DevTools.
- Formatar Valores Complexos: Pode ser usado com uma função de formatação para evitar cálculos pesados a menos que o hook esteja sendo inspecionado.
---
Conclusão
Esses são todos os Hooks disponíveis. Cada um tem seu próprio propósito e utilidade. Experimente-os e veja como eles podem melhorar seu código!
Lembre-se, os Hooks são completamente opcionais e 100% retrocompatíveis. Então, sinta-se à vontade para experimentá-los no seu próprio ritmo. Feliz codificação!
Tem alguma consideração a fazer? Deixe sua contribuição!!!
Você pode me encontrar em:
https://bento.me/magominimalista
