¿Alguna vez cerraste una app y perdiste todo tu progreso? En esta clase aprenderás a dar persistencia de datos en React Native usando Async Storage, para que tus hábitos sigan ahí cada vez que vuelvas a abrir la aplicación. Es ideal si estás construyendo tu primer tracker y quieres que los datos del usuario no se borren al salir.

La idea central es sencilla: tomamos el contexto con todos los hábitos, lo almacenamos en el Async Storage y lo mostramos en el home. Así puedes completar hábitos hoy, salir de la app y, al volver, seguir viendo todo intacto [00:30].

¿Cómo convertir un contexto en un provider reutilizable?

Para que todo el estado viva en memoria y pueda compartirse, necesitamos entregar ese valor a través de un provider. Partimos del modelo que ya habíamos creado y le sumamos los estados y la carga de datos.

La clave está en retornar un node de React. Eso lo logras entregando el habits context y convirtiéndolo en un provider. A ese provider le pasas dos cosas:

• El value, que son los datos que colocamos en la variable.
• Los children, que es toda la funcionalidad que acabamos de crear.

Después exportas la función para poder usarla en otros lugares [01:30].

¿Qué es un provider en React? Es un componente que envuelve tu aplicación y entrega un valor compartido (como el estado) a todos los componentes hijos, sin tener que pasar props manualmente en cada nivel.

¿Para qué sirve el hook useHabits?

Para hacer el contexto verdaderamente reusable, creamos un hook llamado useHabits. No recibe parámetros y entrega el contexto en una constante usando useContext.

Aquí viene un detalle importante: agregamos un if que verifica que el contexto exista. Si no existe, lanzamos un error con throw. El mensaje es claro: useHabits debe usarse dentro de HabitsProvider [02:40].

Eso evita bugs silenciosos. Si alguien usa el hook fuera del provider, la app te avisa de inmediato en lugar de fallar sin explicación. Recuerda también que el contexto debe tener el mismo nombre arriba, en la declaración individual y en el useContext.

¿Cómo implementar el HabitsProvider en la aplicación?

Una vez listo el provider, debes ir al state completo donde viven todas tus funcionalidades y envolverlo ahí. Igual que hiciste con el theme, ahora lo haces con el HabitsProvider [03:50].

Al pasarle las tabs, toda esa funcionalidad puede acceder al HabitsProvider. En el home traemos desde useHabits prácticamente todo el state que creamos:

• loading, para saber si los datos están cargando.
• habits, que contiene la lista completa.
• addHabit, para agregar nuevos hábitos.

Como la lógica de agregar ya vive en el contexto, no la repites en el home. Solo necesitas llamarla.

¿Cómo agregar y completar hábitos desde el contexto?

Para agregar creamos un onAdd con useCallback. Dentro llamamos a la función addHabit del contexto. El flujo es así:

1. Creamos un identificador a partir del título.
2. Si el título está vacío, no retornamos nada.
3. Si existe, llamamos a addHabit y limpiamos el estado con el setState.

Para completar hábitos ya no usamos la función vieja del home, sino toggleHabit, que vive en el contexto [05:40]. Esto conecta cada habit card directamente al estado compartido.

¿Qué hace useCallback en React Native? Memoriza una función para que no se vuelva a crear en cada render. Es útil cuando pasas funciones a componentes hijos y quieres evitar renders innecesarios.

Un ajuste técnico: cuando usas setTimer, el tipo de dato debe ser number, porque eso es lo que devuelves con el valor 250 [03:00].

¿Cómo mostrar los hábitos completados del día?

Para los completados hacemos un filtrado de ítems, pero ahora desde habits y verificando que la acción se complete el mismo día. La razón es que guardamos cada proceso diario, así la racha refleja tu avance real [06:50].

Al renderizar, cambiamos item por habits y eliminamos el keyExtractor, porque la funcionalidad de las llaves ya está incluida dentro del render [08:40]. También agregamos un if para mostrar un texto mientras loading esté activo.

Un error común aparece aquí: si useHabits no retorna el contexto completo, no verás los ítems. La solución es retornar el ctx dentro de la función para poder acceder a cada propiedad [07:30].

¿Cómo limpiar los datos guardados en Async Storage?

Cuando pruebas la app en Expo Go, agregas un hábito, lo completas y la racha aumenta. Antes, al cerrar y reabrir, todo se borraba. Ahora los datos persisten y puedes seguir sumando.

Si quieres empezar desde cero, agregas un botón que hace un clear del Async Storage. Eso limpia toda la memoria. Solo necesitas:

• Importar las librerías correspondientes.
• Agregar manualmente el componente text.
• Dar clic al botón, cerrar la app y volver a abrirla en ceros [10:40].

Con estas bases ya puedes almacenar datos en el Async Storage de cualquier aplicación. Como reto, intenta agregar hábitos directamente desde las sugerencias del Explorer hacia la pantalla principal. ¿Te animas a resolverlo antes de la próxima clase? Cuéntame en los comentarios cómo te fue.