Os Hooks do React

Os Hooks são funções que permitem usar estado e outros recursos do React em componentes funcionais. Eles foram introduzidos no React 16.8 para simplificar o reaproveitamento de lógica entre componentes.

Os Hooks básicos

useState

Já vimos o useState no capítulo anterior, mas aqui vai um lembrete:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useEffect

O useEffect permite gerenciar efeitos colaterais em componentes funcionais:

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Efeito que é executado após cada renderização
    fetchUser(userId).then(setUser);
  }, [userId]); // Dependência: o efeito é executado novamente se userId mudar

  if (!user) return <div>Chargement...</div>;
  return <div>{user.name}</div>;
}

Os Hooks personalizados

Os Hooks personalizados permitem extrair a lógica dos componentes para funções reutilizáveis: