Cómo obtener y combinar la lista y detalles de Pokémon usando React Hooks

Resumen

En esta guía, se abordará cómo combinar dos hooks personalizados en una aplicación React para obtener datos de Pokémon desde la PokeAPI. Los hooks involucrados son usePokemonRefs, que obtiene una lista de referencias de Pokémon, y usePokemonDetails, que obtiene detalles específicos para un Pokémon basado en su ID. El desafío consiste en combinar estos dos hooks para obtener tanto la lista de Pokémon como sus detalles en un solo hook.

Problema

Cuando se consulta la API de Pokémon, el resultado devuelto incluye solo el nombre y la URL de cada Pokémon, lo que implica que se deben hacer múltiples solicitudes para obtener detalles específicos de cada uno. Esto puede ser ineficiente y complicado para un principiante en React, especialmente cuando se sigue la regla de los hooks.

Solución Propuesta

1. Crear un hook combinado (usePokemon) que utilizará tanto usePokemonRefs como usePokemonDetails.
2. Este hook primero obtendrá la lista de Pokémon y luego recorrerá esa lista para obtener los detalles de cada Pokémon usando usePokemonDetails.

Aquí hay un ejemplo de cómo se puede implementar este enfoque:

import { useEffect, useState } from "react";
import usePokemonRefs from "./usePokemonRefs";
import usePokemonDetails from "./usePokemonDetails";

const usePokemon = () => {
  const { data: pokemonRefs, isLoading, error } = usePokemonRefs();
  const [pokemonDetails, setPokemonDetails] = useState([]);

  useEffect(() => {
    if (pokemonRefs && pokemonRefs.results) {
      const fetchDetails = async () => {
        const detailsPromises = pokemonRefs.results.map(pokemon => usePokemonDetails(pokemon.url.split('/').slice(-2, -1)[0]));
        const details = await Promise.all(detailsPromises);

        setPokemonDetails(details);
      };

      fetchDetails();
    }
  }, [pokemonRefs]);

  return { pokemonDetails, isLoading, error };
};

export default usePokemon;

Explicación

• usePokemon: Este hook se encarga de recolectar la lista de referencias a Pokémon y luego, mediante useEffect, ejecuta las consultas para obtener los detalles de cada Pokémon.
• Promise.all: Se utiliza para manejar múltiples promesas (respectivas a las solicitudes de detalles de cada Pokémon) de manera eficiente.

Consideraciones Finales

Este enfoque permite mantener la responsabilidad de cada hook y facilita la obtención de datos de manera estructurada. Es importante recordar que el manejo de estado y efectos en React puede ser complejo, pero con práctica, se vuelve más intuitivo. Además, asegúrate de manejar posibles errores al realizar las solicitudes a la API para garantizar una buena experiencia de usuario.

Recursos Adicionales

Para más información sobre la PokeAPI, visita PokeAPI.