Cursos Empresas Blog Live Conf Eventos Precios

0:0010:21

Lista de Pokémon favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 14 / 21

Ver clases

Lista de Pokémon favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 14 de 21

Clase 14 / 21

Lista de Pokémon favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 14 / 21

Ver clases

Rodrigo Loy

Hace 5 años

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

Hace 5 años

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

Hace 4 años

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

Comentarios (12)12 comentarios

Horus Sinhue Camacho Avila

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

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

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

Fernando Rocha Olivera

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

Hola!

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

Sabino Fernández

David Rangel

Hace un año

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.

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

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

Hace 3 años

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

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.

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

Lista de Pokémon favoritos

Lista de Pokémon favoritos

Lista de Pokémon favoritos

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Lista de Pokémon favoritos

Lista de Pokémon favoritos

Comentarios

Comentarios