Photo by Tatiana Rodriguez on Unsplash

Custom Hooks

Crea tus hooks personalizados

Custom Hooks

Los custom hooks son hooks creados y personalizados por nosotros mismos. Se basan en el API de la Liberia de React a partir de la versión 16.8.0 React Hooks. El propósito de crear custom hooks es abstraer lógica de estados de un componente.

Principales características:

• Los hooks son como legos, puedes utilizar varios hooks para crear uno totalmente nuevo.
• El nombre de las funciones hooks siempre deben empezar por la palabra use.
• Los hooks personalizados se basan en las mismas reglas de los que vienen por defecto en la librería de React (useEffect, useState…).

Las principales ventajas:

• Ayuda al mantenimiento con lógica separada y agnóstica a los componentes.
• Es más fácil para realizar test.
• Se complementa con otros patrones en desarrollo con React.

Las principal desventaja:

• Solo se pueden utilizar a partir de la versión 16.8.0 de React.

¿Cuando utilizar custom hooks?

Básicamente cada vez que quieras reutilizar lógica de estado entre componentes, por ejemplo: Formularios, animaciones, llamadas de APIs, etc.

Ejemplo sin custom hooks.

import React, { useState, useEffect } from "react";

const apiUrl = "https://api.github.com/users/frangercenteno/repos?sort=created";

const ComponentWithoutCustomHooks = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const doFetchData = async () => {
      const fetchRepos = async () => {
        try {
          setIsLoading(true);
          const response = await fetch(apiUrl);
          const data = await response.json();
          setData(data);
        } catch (e) {
          setError(e);
        } finally {
          setIsLoading(false);
        }
      };
      fetchRepos();
    };

    doFetchData();
  }, []);

  if (isLoading) {
    return "Loading...";
  }

  if (error) {
    return <p>{error.message}</p>;
  }

  if (!data) {
    return null;
  }

  return data.map(({ name, id, html_url }) => (
    <div key={id}>
      <p>
        <a href={html_url} target="_blank" rel="noopener noreferrer">
          {name}
        </a>
      </p>
    </div>
  ));
};

export default ComponentWithoutCustomHooks;

Ejemplo con custom hooks.

import React, { useState, useEffect } from "react";

const apiUrl = "https://api.github.com/users/frangercenteno/repos?sort=created";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const doFetchData = async () => {
      const fetchRepos = async () => {
        try {
          setIsLoading(true);
          const response = await fetch(url);
          const data = await response.json();
          setData(data);
        } catch (e) {
          setError(e);
        } finally {
          setIsLoading(false);
        }
      };
      fetchRepos();
    };

    doFetchData();
  }, []);

  return {
    data,
    isLoading,
    error,
  };
};

const ComponentWithCustomHooks = () => {
  const { data, isFetching, error } = useFetchData(apiUrl);

  if (isFetching) {
    return "Loading...";
  }

  if (error) {
    return <p>{error.message}</p>;
  }

  if (!data) {
    return null;
  }

  return data.map(({ name, html_url }) => (
    <div key={html_url}>
      <p>
        <a href={html_url} target="_blank" rel="noopener noreferrer">
          {name}
        </a>
      </p>
    </div>
  ));
};

export default ComponentWithCustomHooks;

Conclusión.

No tengas miedo a crear tus propios hooks para expandir las funcionalidades de los mismos, como bonus te dejo este repositorio con muchos custom hooks creados por la comunidad que te pueden servir como inspiración o utilizarlos directamente. Link

Gracias por tu tiempo.