Los Hooks de React

Los Hooks son funciones que permiten usar el estado y otras características de React en los componentes funcionales. Se introdujeron en React 16.8 para simplificar la reutilización de la lógica entre componentes.

Los Hooks básicos

useState

Ya lo vimos en el capítulo anterior, pero aquí tienes un recordatorio:

import { useState } from 'react';

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

useEffect

useEffect permite gestionar los efectos secundarios en los componentes funcionales:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Efecto que se ejecuta después de cada renderizado
    fetchUser(userId).then(setUser);
  }, [userId]); // Dependencia: el efecto se vuelve a ejecutar si userId cambia

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

Los Hooks personalizados

Los Hooks personalizados permiten extraer la lógica de los componentes a funciones reutilizables: