Hooks Integrados do React

Hooks de Estado

Estado permite que um componente “lembre” informações como entrada do usuário. Por exemplo, um componente de formulário pode usar o estado para armazenar o valor de entrada, enquanto um componente de galeria de imagens pode usar o estado para armazenar o índice da imagem selecionada.

Para adicionar estado a um componente, use um destes Hooks:

• useState declara uma variável de estado que você pode atualizar diretamente.
• useReducer declara uma variável de estado com a lógica de atualização dentro de uma função redutora.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Hooks de Contexto

Contexto permite que um componente receba informações de pais distantes sem passar como props. Por exemplo, o componente de nível superior da sua aplicação pode passar o tema de UI atual para todos os componentes abaixo, não importa quão profundo.

• useContext lê e se inscreve em um contexto.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Hooks de Ref

Refs permitem que um componente mantenha algumas informações que não são usadas para renderização, como um nó do DOM ou um ID de timeout. Ao contrário do estado, atualizar uma ref não re-renderiza seu componente. Refs são uma “saída” da filosofia do React. Elas são úteis quando você precisa trabalhar com sistemas não-React, como as APIs nativas do navegador.

• useRef declara uma ref. Você pode armazenar qualquer valor nela, mas na maioria das vezes é usada para armazenar um nó do DOM.
• useImperativeHandle permite que você personalize a ref exposta pelo seu componente. Isso é raramente usado.

function Form() {
  const inputRef = useRef(null);
  // ...

Hooks de Efeito

Efeitos permitem que um componente se conecte e sincronize com sistemas externos. Isso inclui lidar com rede, DOM do navegador, animações, widgets escritos usando uma biblioteca de UI diferente e outro código que não é do React.

• useEffect conecta um componente a um sistema externo.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Efeitos são uma “saída” da filosofia do React. Não use Efeitos para orquestrar o fluxo de dados da sua aplicação. Se você não estiver interagindo com um sistema externo, você pode não precisar de um Efeito.

Existem duas variações raramente usadas de useEffect com diferenças de tempo:

• useLayoutEffect dispara antes que o navegador repinte a tela. Você pode medir o layout aqui.
• useInsertionEffect dispara antes que o React faça alterações no DOM. Bibliotecas podem inserir CSS dinâmico aqui.

Hooks de Desempenho

Uma maneira comum de otimizar o desempenho de re-renderização é pular trabalhos desnecessários. Por exemplo, você pode dizer ao React para reutilizar um cálculo em cache ou para pular uma re-renderização se os dados não mudaram desde a última renderização.

Para pular cálculos e re-renderizações desnecessárias, use um destes Hooks:

• useMemo permite que você cache o resultado de um cálculo custoso.
• useCallback permite que você cache uma definição de função antes de passá-la a um componente otimizado.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Às vezes, você não pode pular a re-renderização porque a tela realmente precisa ser atualizada. Nesse caso, você pode melhorar o desempenho separando atualizações bloqueantes que devem ser síncronas (como digitar em um campo de entrada) de atualizações não-bloqueantes que não precisam bloquear a interface do usuário (como atualizar um gráfico).

Para priorizar a renderização, use um destes Hooks:

• useTransition permite que você marque uma transição de estado como não-bloqueante e permita que outras atualizações a interrompam.
• useDeferredValue permite que você adie a atualização de uma parte não crítica da UI e permita que outras partes sejam atualizadas primeiro.

Outros Hooks

Esses Hooks são principalmente úteis para autores de bibliotecas e não são comumente usados no código da aplicação.

• useDebugValue permite que você personalize o rótulo que o React DevTools exibe para seu Hook personalizado.
• useId permite que um componente associe um ID único a si mesmo. Tipicamente usado com APIs de acessibilidade.
• useSyncExternalStore permite que um componente se inscreva em uma loja externa.

• useActionState permite que você gerencie o estado de ações.

Seus próprios Hooks

Você também pode definir seus próprios Hooks personalizados como funções JavaScript.