Lista de Pokémon favoritos

Clase 14 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Horus Sinhue Camacho Avila

student•

Muy mal a partir de 2 clases atrás comete errores muy tontos que si no tienes la mínima experiencia te puede frustrar por que no sabes como manejar tantos errores y pierdes mucho tiempo tratando de encontrar donde trae tanto problema

LEON DARIO ARANGO AMAYA

student•

No es necesario utilizar el useCallback y el useFocusEffect, con agregar el pokemons a la condición de useEffect es suficiente para que se recargue la vista al añadir o eliminar un favorito.

Jaime David Burbano Montoya

student•

El copiar y pegar código, sigue el estandard "STUPID". Por favor, no lo hagan. Cuando puedan, lean acerca de clean code

Rodrigo Loy

student•

Hola, muy bueno este curso pero creo que debiste explicar porque useFocusEffect y usecallback hace que se soluciona el problema de los favoritos

Luis Fernando Méndez González

student•

Hola! Esto es más una cuestión de teoría, pero te dejo la explicación acá: . Cuando usamos un useEffect buscamos que una acción se ejecute al renderizar nuestro código una o multiples veces según las dependencias que este hook está observando. El problema por el que no aparecen nuestros favoritos actualizados es que la Screen solo se renderiza una vez, luego cuando cambiamos de screen y volvemos a ella cambia es el "foco", es decir, dejamos de enfocar esa screen o la volvemos a enfocar, pero el renderizado ya ocurrió. Esto permite mantener buen performance en la app... Pero nos trae problemas como este. . ¿Entonces a qué viene el useFocusEffect? Pues este hook de react navigation justamente nos ayuda a activar una sección de código tal como lo haría un useEffect durante el renderizado, pero cada vez que una pantalla sea enfocada en nuestra aplicación. De este modo solventamos el problema de no tener nuestro favoritos actualizados... Pero ahora hay otro problema. . useFocusEffect es un hook que recibe un callback para su ejecución, por esta razón un useEffect no nos serviría en este caso, ya que al tratar de asignarlo a una constante dentro del useFocusEffect se rompería (puedes probarlo poniendo un useEffect dentro del useFocusEffect). . ¿Pero por qué usar useCallback en lugar de cualquier callback creado por nosotros? Performance y practicidad :) no nos cuesta nada agregarlo, y el hook de useCallback nos permite decirle al código "hey, que te voy a usar muchas veces, entonces no me re-renderices todo si en el fondo la información no ha cambiado". Y esto es muy útil en términos de performance, esto ocurre porque el hook de useCallback tiene un comportamiento de "memoización", puedes leer más al respecto acá y acá.

Stiven Jiménez

student•

En esta doc. explican el porqué https://reactnavigation.org/docs/use-focus-effect/

Fernando Rocha Olivera

student•

Tengo un problema, tal vez le pasa a alguien más, pero al dar click al botón de favoritos dentro de un pokemon, se agrega 2 veces a la lista, saludos.

Héctor Eduardo López Carballo

student•

Hola!

Podrías compartir tu repositorio para ver qué es lo que puede estar pasando?

Sabino Fernández

student•

Por mi parte lo que hice para no repetir tanto código, fue crear una función de getDetailsPk en Utils para hacer hacer el get de los detalles de cada pokemón y devolverlo en un array con lo que necesito.

import { getPokemonDetails } from '../api/pokemon';

export async function getDetailsPk(pokemons) {
  const pokemonDetail = [];

  for await (const pokemon of pokemons) {
    const identifier = pokemon.name || pokemon;
    const pokemonDetails = await getPokemonDetails(identifier);
    pokemonDetail.push({
      id: pokemonDetails.id,
      name: pokemonDetails.name,
      type: pokemonDetails.types.map((type) => type.type.name),
      order: pokemonDetails.order,
      image: pokemonDetails.sprites.other['official-artwork'].front_default,
    });
  }
  return pokemonDetail;
}

En el caso de

const identifier = pokemon.name || pokemon;

Lo que hace es si pokemon . name existe hace el get con el name (esto en el caso del pestaña de pokedex), sino usa el id del pokemon que recibe de la lista de favoritos.

Ya en la pantalla de favoritos solo hago esto para mostrar la tarjeta de cada pokemón ^^

const getFavoritePokemon = async () => {
    try {
      const response = await getFavorites();
      const pokemonDetails = await getDetailsPk(response);
      setFavorites(pokemonDetails);
    } catch (error) {
      console.error(error);
    }
  };

  useFocusEffect(
    useCallback(() => {
      getFavoritePokemon();
    }, [auth])
  );

David Rangel

student•

Les dejo mis cambios para esta clase, permite: 1. Guardar lista de pokemons con toda su data en la memoria del dispositivo. 2. Permite eliminar la data de todos los favoritos al mismo tiempo. 3. Permite eliminar toda la Data de un sólo pokemon de la memoria haciendo toggle con el botón de "me gusta". 4. Pone un texto distinto si no hay pokemons en la memoria.

David Rangel

student•

A Sept de 2025, agrego botón y lógica para eliminar a todos los favoritos:

David Rangel

student•

Este comment es a Sept de 2025, les dejo un MR donde se guarda la lista de pokemons en un store y además remueve los duplicados de dicha store:

Daniel Ochoa

student•

Esta muy mal hecho copiar y pegar código sin explicar las diferencias de usar un hook u otro en este caso.

José Cortés Molina

student•

creo que ir y ejecutar en un for la petición no es lo mejor, por temas de recursos, si hay 100 favoritos, no sería bueno hacer 1.000 peticiones, lo mejor es que cuando tengamos nuestra propia api recibir el array de favoritos y crear una consulta que devuelva todos los valores.

Daniel Ochoa

student•

El problema ahí es de la construcción de la API que no es nuestra, este si sale del scope del curso. Efectivamente cuando tengas tu API puedes hacer un query simple a DB de los parametros que esten incluidos en el array.

Eddy Huaylla Quispe

student•

Cod:

screens/Favorite.js

import React, { useCallback, useState } from "react";
import { useFocusEffect } from "@react-navigation/native";
import { Text } from "react-native";

import { getPokemonsFavoriteApi } from "../services/favorite";
import { getPokemonDetailsApi } from "../services/pokemon";

import { useAuth } from "../hooks/useAuth";

import { PokemonList } from "../components/PokemonList";

export const Favorite = () => {
	const [ pokemons, setPokemons ] = useState( [] ) ;
	const { auth } = useAuth();

	useFocusEffect(
		useCallback( () => {
			if( auth ) {
				( async () => {
					try {
						const response = await getPokemonsFavoriteApi();

						const pokemonsArray = [];
						for await ( const id of response ) {
							const pokemonDetails = await getPokemonDetailsApi( id );

							pokemonsArray.push( {
								id: pokemonDetails.id,
								name: pokemonDetails.name,
								type: pokemonDetails.types[0].type.name,
								order: pokemonDetails.order,
								image: pokemonDetails.sprites.other["official-artwork"].front_default,
							} );
						}

						setPokemons([...pokemons, ...pokemonsArray]);

					} catch (error) {
						console.error(error);
					}
				} )();
			}
		}, [ auth ] )
	)


	return !auth ? (
		<Text>Usuario No Logeado</Text>
	) : (
		<PokemonList
			pokemons = { pokemons }
		/>
	)

}

import { getPokemonDetails } from '../api/pokemon';

export async function getDetailsPk(pokemons) {
  const pokemonDetail = [];

  for await (const pokemon of pokemons) {
    const identifier = pokemon.name || pokemon;
    const pokemonDetails = await getPokemonDetails(identifier);
    pokemonDetail.push({
      id: pokemonDetails.id,
      name: pokemonDetails.name,
      type: pokemonDetails.types.map((type) => type.type.name),
      order: pokemonDetails.order,
      image: pokemonDetails.sprites.other['official-artwork'].front_default,
    });
  }
  return pokemonDetail;
}

const getFavoritePokemon = async () => {
    try {
      const response = await getFavorites();
      const pokemonDetails = await getDetailsPk(response);
      setFavorites(pokemonDetails);
    } catch (error) {
      console.error(error);
    }
  };

  useFocusEffect(
    useCallback(() => {
      getFavoritePokemon();
    }, [auth])
  );

import React, { useCallback, useState } from "react";
import { useFocusEffect } from "@react-navigation/native";
import { Text } from "react-native";

import { getPokemonsFavoriteApi } from "../services/favorite";
import { getPokemonDetailsApi } from "../services/pokemon";

import { useAuth } from "../hooks/useAuth";

import { PokemonList } from "../components/PokemonList";

export const Favorite = () => {
	const [ pokemons, setPokemons ] = useState( [] ) ;
	const { auth } = useAuth();

	useFocusEffect(
		useCallback( () => {
			if( auth ) {
				( async () => {
					try {
						const response = await getPokemonsFavoriteApi();

						const pokemonsArray = [];
						for await ( const id of response ) {
							const pokemonDetails = await getPokemonDetailsApi( id );

							pokemonsArray.push( {
								id: pokemonDetails.id,
								name: pokemonDetails.name,
								type: pokemonDetails.types[0].type.name,
								order: pokemonDetails.order,
								image: pokemonDetails.sprites.other["official-artwork"].front_default,
							} );
						}

						setPokemons([...pokemons, ...pokemonsArray]);

					} catch (error) {
						console.error(error);
					}
				} )();
			}
		}, [ auth ] )
	)


	return !auth ? (
		<Text>Usuario No Logeado</Text>
	) : (
		<PokemonList
			pokemons = { pokemons }
		/>
	)

}

Lista de Pokémon favoritos

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?