Cómo crear hooks propios en React

Un hook es básicamente una función, pero con muchas ventajas que aporta React. Hacer un hook propio (o custom hook) es una buena manera de externalizar partes de lógica y sobre todo, hacerla reutilizable, por eso es tan interesante que puedas hacer tus propios hooks.

Vamos a hacer un hook que se encargará de detectar si el usuario tiene el modo oscuro activo.

Primero el componente que mostrará el resultado:

const App = () => {
  return (
    <p>Is dark?</p>
  );
}

Luego lo editaremos para que use el hook que creamos ya mismo.

const useIsDark = () => {

  // El hook mantiene un state con el valor que tendrá que devolver
  const [isDark, setIsDark] = useState(false);
  
  // Usa un useEffect para crear un listener y limpiarlo cuando sea
  // necesario.
  useEffect(() => {
    const match = window.matchMedia('(prefers-color-scheme: dark)');
    const test = e => setIsDark(e.matches);
    match.addEventListener('change', test);
    return () => match.removeListener(test);
  }, []);
  
  return isDark;
}

Como se ve ahí, una parte fundamental de los hooks es que pueden hacer uso de herramientas de React, como useEffect o useState (de los que ya hablamos en su artículo), y esa es la diferencia principal que hay entre una función normal y hook. Lo único que tenemos que tener en cuenta es que los hooks deben empezar por la palabra use.

Para poder utilizar este hook, sólo hay que agregar una linea al componente App, que quedaría así:

const App = () => {

  const isDark = useIsDark();
  
  return (
    <p>Is dark? {isDark ? '🌚' : '🌕'}</p>
  );
}

Realmente no hay mucho más que explicar. Los hooks son una herramienta sencilla de crear y de utilizar, lo difícil es pensar qué hooks tienes que hacer.

Os dejo el código funcionando en Codepen:

See the Pen by Josep Viciana (@emmgfx) on CodePen.

Foto de Joetography en Pexels