Lista de Pokémon favoritos

Curso de React Native: Formularios, Almacenamiento y Deploy

Contenido del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Tomar examen

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 de 21

Clase 14 / 21

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/

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?

Lista de Pokémon favoritos

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy