10 hooks do React que você precisa conhecer

Foto de Jamie Matociños na Unsplash

O React é uma biblioteca JavaScript amplamente usada para criar interfaces de usuário. Uma das suas características mais valiosas é o sistema de Hooks, que permite o uso de estado e outros recursos do React sem a necessidade de escrever uma classe. Embora o useState e o useEffect sejam os Hooks mais conhecidos, o React oferece uma variedade de Hooks menos comuns que podem ser extremamente úteis. Neste post, exploraremos alguns desses Hooks, como utilizá-los e em quais cenários eles são mais apropriados.

1. useReducer

O useReducer é um Hook que permite gerenciar o estado de componentes complexos de maneira mais eficiente. Semelhante ao Redux, ele trabalha com um estado global e uma função redutora para atualizar o estado com base em ações enviadas.

Exemplo:

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: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

useReducer - React

2. useMemo

O useMemo é um Hook que permite otimizar o desempenho de componentes memorizando valores computados, evitando assim recálculos desnecessários.

Exemplo:

import React, { useMemo } from 'react';

function expensiveCalculation(number) {
  // Cálculo custoso aqui
}
function Component({ number }) {
  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);
  return <div>{memoizedValue}</div>;
}

useMemo - React

3. useCallback

O useCallback é um Hook que retorna uma versão memorizada de uma função callback, evitando a criação de uma nova instância da função a cada renderização.

Exemplo:

import React, { useCallback } from 'react';

function Component({ onButtonClick }) {
  const memoizedCallback = useCallback(() => {
    onButtonClick();
  }, [onButtonClick]);

  return <button onClick={memoizedCallback}>Clique aqui</button>;
}

useCallback - React

4. useImperativeHandle

O useImperativeHandle é um Hook que permite customizar a instância de um componente exposta ao usar ref, dando controle sobre quais valores e funções são acessíveis.

Exemplo:

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

function TextInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} {...props} />;
}

const ForwardedTextInput = forwardRef(TextInput);

function App() {
  const inputRef = useRef();

  return (
    <>
      <ForwardedTextInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focar no input</button>
    </>
  );
}

useImperativeHandle - React

5. useLayoutEffect

O useLayoutEffect é semelhante ao useEffect, mas é executado de forma síncrona após todas as mutações do DOM. É útil quando você precisa fazer alterações no DOM e garantir que elas ocorram antes da próxima renderização do navegador.

Exemplo:

import React, { useLayoutEffect, useRef } from 'react';

function Component() {
  const divRef = useRef();

  useLayoutEffect(() => {
    divRef.current.style.backgroundColor = 'red';
  }, []);

  return <div ref={divRef}>Meu fundo será vermelho</div>;
}

useLayoutEffect - React

6. useDebugValue

O useDebugValue é um Hook que permite adicionar rótulos personalizados a Hooks personalizados ao usar as Ferramentas de Desenvolvedor do React. Isso facilita a depuração de componentes.

Exemplo:

import React, { useState, useEffect, useDebugValue } from 'react';

function useCustomHook() {
  const [value, setValue] = useState('Inicial');
  useDebugValue(value);

  useEffect(() => {
    setTimeout(() => {
      setValue('Atualizado');
    }, 1000);
  }, []);

  return value;
}

function Component() {
  const value = useCustomHook();

  return <div>{value}</div>;
}

useDebugValue - React

7. useDeferredValue

O useDeferredValue é um Hook que permite adiar atualizações de estado menos críticas, melhorando a capacidade de resposta do aplicativo.

Exemplo:

import React, { useState, useDeferredValue } from 'react';

function Component() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

  return (
    <>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Digite aqui"
      />
      <div>{`Texto diferido: ${deferredText}`}</div>
    </>
  );
}

useDeferredValue - React

8. useTransition

O useTransition é outro Hook que permite adiar a renderização de um componente até que os dados necessários estejam disponíveis, evitando a exibição de componentes incompletos.

Exemplo:

import React, { useState, useTransition } from 'react';

function fetchData() {
  return new Promise((resolve) =>
    setTimeout(() => resolve('Dados carregados'), 3000)
  );
}

function Component() {
  const [data, setData] = useState(null);
  const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

  const loadData = async () => {
    startTransition(async () => {
      const result = await fetchData();
      setData(result);
    });
  };

  return (
    <>
      <button onClick={loadData}>Carregar dados</button>
      <div>{isPending ? 'Carregando...' : data}</div>
    </>
  );
}

useTransition - React

9. useId

O useId é um Hook que permite gerar um ID único e estável para um componente.

Exemplo:

import { useId } from 'react';

function Component() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>Nome:</label>  
      <input id={id} type="text" />
    </>
  );
}

useId - React

10. useSyncExternalStore

O useSyncExternalStore é um Hook que tem como objetivo fornecer uma maneira de ler dados de uma fonte externa de armazenamento mutável e sincronizá-los com um componente React. Ele é projetado para ser uma base para a construção de Hooks personalizados que lidam com o armazenamento externo de dados e pode ser útil ao trabalhar com bibliotecas de gerenciamento de estado como Redux ou MobX.

Exemplo:

import { useSyncExternalStore } from 'react';

function MyComponent() {
  const store = getExternalStore(); // Função que retorna a instância do seu armazenamento externo.
  const value = useSyncExternalStore(
    store.subscribe,
    store.getState
  );

  return <div>{value}</div>;
}

No exemplo acima, useSyncExternalStore recebe duas funções: a primeira é a função de inscrição que o React usará para se inscrever em atualizações no armazenamento externo e a segunda é a função que retorna o estado atual do armazenamento externo.

useSyncExternalStore - React

Conhecer hooks além dos comuns no React amplia seu arsenal para resolver problemas do dia a dia! 🤯

Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬

Se gostou, dê 1 ou 50 claps 👏

Obrigado pela leitura!

Me acompanhe por aí! 😜

• Portfólio: vinniciusgomes.com
• GitHub: @vinniciusgomes
• LinkedIn: @vinniciusgomes