Generación de IDs únicos para gestionar tareas en React

Cuando una aplicación permite editar el texto de sus elementos, usar ese mismo texto como identificador único deja de ser viable. En esta sesión se aborda exactamente ese problema: migrar la lógica de identificación de todos basada en texto hacia un sistema de IDs numéricos únicos, preparando el terreno para la funcionalidad de edición y el uso de rutas con React Router.

¿Por qué el texto ya no sirve como identificador único?

Originalmente, cada todo se identificaba por su propiedad text. Esto funcionaba porque se asumía que ningún usuario agregaría dos tareas con el mismo texto [0:30]. Sin embargo, al introducir la posibilidad de editar el texto, surgen problemas serios:

• Si el texto cambia, el identificador único se rompe.
• Las URLs que apuntan a un todo específico dejarían de funcionar tras la edición.
• Se necesitarían validaciones innecesariamente complicadas.

La solución profesional es trabajar con IDs numéricos que no dependan del contenido editable del todo.

¿Cómo se modifica el custom hook useTodos para soportar IDs?

Dentro del custom hook useTodos, las funciones addTodo, completeTodo y deleteTodo identificaban los todos comparando el texto recibido como parámetro con todo.text mediante findIndex [1:45]. El cambio consiste en que ahora reciben un ID en lugar de un texto.

En la función addTodo, cada nuevo todo recibe una estructura ampliada:

javascript const id = newTodoId(todos); // Estructura del nuevo todo: { text, completed: false, id }

Para completeTodo y deleteTodo, la comparación pasa de todo.text === text a todo.id === id [2:15].

¿Qué papel juega el versionamiento en localStorage?

Un detalle fundamental es el versionamiento de la key en localStorage [3:30]. Los todos anteriores se guardaban bajo TODOS_V1 y no tenían propiedad id. Al cambiar la estructura, intentar leer esos datos viejos causaría errores difíciles de depurar. Por eso se migra a TODOS_V2, garantizando que solo se trabajen todos con la nueva estructura. Este patrón de versionamiento es un tip valioso para cualquier aplicación que persista datos localmente.

¿Cómo funciona la función newTodoId?

La función newTodoId recibe la lista completa de todos y devuelve un ID único [4:50]. Su lógica es directa:

1. Si la lista está vacía (todoList.length es cero o falsy), retorna 1 como primer ID.
2. Si hay elementos, extrae todos los IDs con map y encuentra el mayor usando el spread operator con Math.max.
3. Devuelve ese valor máximo más uno.

javascript function newTodoId(todoList) { if (!todoList.length) { return 1; } const idList = todoList.map(todo => todo.id); const idMax = Math.max(...idList); return idMax + 1; }

El uso de Math.max requiere argumentos individuales, no un array. Por eso se utiliza la sintaxis de spread operator (...idList) para convertir los elementos del arreglo en parámetros separados [6:10].

¿Qué errores aparecieron durante la implementación?

Al probar sin la validación de lista vacía, el primer todo recibió null como ID [7:40]. Al intentar agregar un segundo, Math.max sobre una lista que contenía null devolvió -Infinity, causando un error encadenado. La solución fue agregar la guarda al inicio de newTodoId que retorna 1 cuando no existen todos previos [8:25].

Tras limpiar localStorage y volver a probar:

• El primer todo recibió ID 1.
• El segundo recibió ID 2.
• Las funciones de completar y eliminar operaron correctamente usando IDs en lugar de texto [9:15].

También se actualizó el componente Home, donde las keys de React para la lista pasaron de todo.text a todo.id, y las llamadas a completeTodo y deleteTodo ahora envían todo.id como argumento [8:00].

Con los IDs funcionando, el siguiente paso natural es implementar la edición de todos mediante rutas con React Router, reemplazando lo que inicialmente se pensó como un modal por una página dedicada. ¿Se te ocurre otra forma de generar IDs únicos? Compártela en los comentarios.