¿Quieres que tu app de hábitos cobre vida? Aquí aprendes a manejar el estado con useState y useCallback en React Native para agregar nuevos hábitos y aumentar su racha con un solo toque. Es ideal para quien ya tiene el estado inicial montado y busca darle interactividad real a su aplicación móvil.

La idea central es sencilla pero poderosa: conectar una entrada de texto con un listado dinámico y permitir que cada hábito sume o reste su racha cuando lo marcas como completado. Y aquí viene lo interesante: todo se logra sin librerías externas, solo con los hooks que React Native ya trae.

¿Cómo aumentar la racha de un hábito al seleccionarlo?

La primera funcionalidad consiste en incrementar el número de la racha cada vez que tocas un hábito. Esto se construye con un useCallback, un hook que memoriza la función para evitar que se recree en cada render.

Para que funcione necesitas un identificador de tipo string que indique cuál hábito seleccionaste. Dentro de la función usas setItems, traes todo el estado previo con el prev y lo recorres con un .map() para ir del objeto general a cada hábito individual.

La lógica se apoya en un condicional: si el id del hábito es diferente al que presionaste, lo retornas sin cambios. Si coincide, entras a modificarlo.

• Verificas la propiedad isComplete para alternar entre completo y no completo, logrando que el mensaje se vea dinámico.
• Si el hábito queda completo, le sumas uno al streak.
• Si lo contrario, restas uno, pero usando Math.max con cero como mínimo para que la racha nunca baje de cero.

Ese detalle del Math.max evita un bug clásico: rachas en negativo que no tendrían sentido en una app de seguimiento [00:46].

¿Qué hace useCallback en React Native? Memoriza una función para que no se vuelva a crear en cada renderizado. Esto mejora el rendimiento cuando pasas funciones a componentes hijos o dependes de identificadores específicos.

¿Cómo agregar nuevos hábitos con una entrada de texto?

La segunda funcionalidad es addHabit, también construida con useCallback, pero esta vez sin recibir parámetros. Aquí entra en juego otro useState que guarda si estamos creando un hábito nuevo o no.

Primero validas el título: si no existe, la función no retorna nada y corta ahí mismo. Si el título sí existe, agregas el hábito al arreglo de items respetando lo que ya había en el estado previo.

Cada hábito nuevo nace con propiedades iniciales bien definidas:

• Un identificador único que combina una letra "h" con la fecha instantánea de JavaScript, garantizando que no se repita.
• La racha iniciada en cero, porque apenas lo creas.
• El isComplete en false, ya que todavía no lo has completado.
• Una prioridad inicializada en "low".

Al terminar de crear, vuelves a setear el estado "nuevo" en vacío para indicar que ya no estás en modo creación [02:30].

¿Por qué usar Date para generar identificadores únicos? Porque la fecha instantánea de JavaScript cambia con cada milisegundo, así cada hábito recibe un id irrepetible sin necesidad de librerías externas.

¿Cómo construir el TextInput para capturar el hábito?

Aquí aparece por primera vez el TextInput, la etiqueta que permite tener una entrada de texto en React Native. Se cierra sobre sí misma y solo lleva propiedades dentro.

• El value toma el valor del nuevo hábito.
• Una función que escucha constantemente los cambios conecta con el state mediante setNuevo, usando corchetes porque lo tratamos como variable de JavaScript, no como string.
• El placeholder, este sí un string, muestra un ejemplo como "Editar un hábito" para guiar al usuario.

Un detalle importante: ese TextInput debe importarse desde la librería de React Native, no desde un componente propio. Validar la importación evita errores silenciosos [04:40].

¿Cómo mostrar el listado y conectar el botón de añadir?

Para enviar la información usas la función addHabit en el momento de agregar. Luego sumas un botón con Pressable, el mismo componente usado en la card, y en su onPress colocas la funcionalidad de agregar. Con theme.text escribes la palabra "Añadir".

Los estilos ayudan a organizar la vista con un row usando flexbox y algunos borders tanto para los botones como para el input. Estos estilos se llaman mediante un objeto porque mezclan el stylesheet propio con los colores del useTheme, de donde salen los backgrounds, border color y color.

El paso final es mapear el initialState en lugar del apartado anterior. Recorres cada hábito uno por uno y le pasas sus propiedades: key, título, racha, si es completo y la prioridad.

Aquí hay una advertencia clave sobre setItems:

1. No solo mapees el nuevo ítem que agregas.
2. También mapea todo el listado que viene por detrás, es decir el initialState completo.
3. Así conservas los hábitos existentes y los nuevos juntos.

Si olvidas este paso, perderías los hábitos anteriores al crear uno nuevo. Para guardar en memoria cuántos ítems están completados, se apoya en un hook de React que almacena esos valores sin recalcularlos en cada render [04:00].

Al probarlo en el dispositivo aparece el TextInput listo para escribir. En la demostración se agrega el hábito "sacar a Naná", su perrita, y al presionar "Añadir" entra al listado. Al seleccionar cualquier hábito, la racha aumenta y queda marcado como completado del día [05:50].

Con esto tu aplicación gana dinamismo y se acerca mucho más a un producto real. ¿Te animas a replicar la funcionalidad de la racha con tus propios hábitos? Cuéntame en los comentarios cómo lo resolviste.