Deja de repetir código: utiliza Hooks personalizados en React

A menudo te encuentras copiando y pegando la misma lógica en diferentes componentes de React.

El truco

Antes:

import { useState, useEffect } from 'react';

function MiComponente() {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
    fetch('https://api.ejemplo.com/datos')
      .then(response => response.json())
      .then(data => setDatos(data));
  }, []);

  return <div>{datos ? datos.nombre : 'Cargando...'}</div>;
}

function OtroComponente() {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
    fetch('https://api.ejemplo.com/datos')
      .then(response => response.json())
      .then(data => setDatos(data));
  }, []);

  return <div>{datos ? datos.nombre : 'Cargando...'}</div>;
}

Después:

import { useState, useEffect } from 'react';

function useFetchDatos(url) {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setDatos(data));
  }, [url]);

  return datos;
}

function MiComponente() {
  const datos = useFetchDatos('https://api.ejemplo.com/datos');

  return <div>{datos ? datos.nombre : 'Cargando...'}</div>;
}

function OtroComponente() {
  const datos = useFetchDatos('https://api.ejemplo.com/datos');

  return <div>{datos ? datos.nombre : 'Cargando...'}</div>;
}

Crear un hook personalizado (useFetchDatos) te permite encapsular lógica repetitiva, como la obtención de datos. Esto no solo reduce la duplicación en tus componentes, sino que también mejora la legibilidad y la capacidad de mantenimiento de tu código. Si en el futuro necesitas cambiar cómo se obtienen los datos, solo deberás modificar el hook.

Reutilizar hooks personalizados es clave para mantener un código limpio y DRY en tus proyectos con React.