Mejora de la Experiencia del Usuario al Editar To Do's en React

Clase 24 de 30 • Curso de React.js: Navegación con React Router

Contenido del curso

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Resumen

Cuando trabajas con formularios de edición en React, uno de los detalles que más impacta la experiencia del usuario es mostrar el texto original que se va a editar. Si el usuario llega a un formulario vacío y debe reescribir todo desde cero, la experiencia se rompe. Aquí se aborda exactamente ese problema: cómo precargar valores por defecto en un textarea y cómo usar useLocation de React Router para transmitir datos entre rutas y evitar tiempos de carga innecesarios.

¿Cómo enviar un valor por defecto al formulario de edición?

El punto de partida es la página de edición de un todo. Al hacer clic en el botón de editar, se abre el formulario pero el textarea aparece vacío. Para solucionarlo, se necesita una propiedad que lleve el texto original al componente TodoForm.

Desde la ruta EditTodoPage se envía una nueva prop llamada defaultTodoText al componente del formulario. Pero para obtener ese texto, primero hay que buscar el todo correcto dentro de la lista usando su ID [01:19].

La solución consiste en crear una función getTodo dentro del custom hook useTodos [01:51]:

Recibe el ID del todo que se busca.
Filtra la lista de todos para encontrar la coincidencia.
Retorna el objeto completo del todo.

Un detalle interesante surge al decidir dónde ubicar esta función: no actualiza el estado, simplemente lo lee. No encaja del todo en state updaters ni es un estado puro, pero se retorna dentro del objeto state como una función de lectura [02:37].

¿Por qué el todo aparece como undefined y cómo se soluciona?

Al probar la implementación, getTodo devuelve undefined [03:34]. El problema no está en la lógica de búsqueda, sino en que el useLocalStorage simula un comportamiento asíncrono con un setTimeout [04:17]. Durante esos primeros segundos, la lista de todos es un array vacío, así que no hay nada que encontrar.

La solución es preguntar por el estado de carga antes de intentar buscar el todo:

Si loading es true, se muestra un mensaje de "cargando..." [05:09].
Si loading es false, ya existe la lista completa y se puede llamar a getTodo con el ID obtenido de useParams.

En el componente TodoForm, el useState que controla el textarea recibe como valor inicial props.defaultTodoText o, si no existe, un string vacío [06:16]. Esto garantiza que no se rompa nada cuando no hay texto por defecto.

jsx const [value, setValue] = React.useState(props.defaultTodoText || '');

¿Cómo usar useLocation para evitar cargas innecesarias?

Aunque el formulario ya muestra el texto correcto, hay un problema de rendimiento: si el usuario ya ve la información en el home y navega al edit, vuelve a cargar todo desde cero [07:20]. Tres segundos de espera para datos que ya estaban disponibles.

Aquí entra useLocation, un custom hook de React Router DOM v6 que permite transmitir información entre rutas durante la navegación [07:40].

Desde el home, la función navigate recibe un segundo argumento con un objeto state:

jsx navigate(/edit/${todo.id}, { state: { todo: todo } });

En la página de edición, se recupera esa información con useLocation [09:01]:

jsx const location = useLocation();

La lógica condicional queda así:

Si location?.state?.todo existe, se usa directamente su texto. Sin esperas [09:30].
Si no existe (porque el usuario entró directamente por URL) y loading es true, se muestra el mensaje de carga.
Si no hay datos de location y ya terminó de cargar, se obtiene el texto con getTodo.

El operador de encadenamiento opcional (?.) es fundamental aquí [11:04]. Sin él, al recargar la página, state sería undefined y provocaría un error al intentar acceder a .todo.

¿Cuál es el resultado final de esta optimización?

Navegación desde el home: el texto aparece instantáneamente sin pantalla de carga.
Acceso directo por URL: se muestra "cargando" y, al terminar, aparece el texto correcto.
La edición funciona en ambos escenarios sin duplicar código [12:15].

Este patrón es especialmente útil cuando se trabaja con API REST reales, donde los tiempos de respuesta pueden ser significativos. Transmitir datos ya cargados entre rutas mejora notablemente la percepción de velocidad.

¿Encontraste una forma diferente de organizar getTodo dentro del custom hook? Comparte tu enfoque en los comentarios.

Comentarios

Edgardo Andres Vargas Saenz

student•

Yo he encontrado un error. . Resulta que la aplicación cada vez que damos click en los botones de añadir un TODO o editar un TODO, hace uso del custom hook useTodos() y este a su vez hace uso del custom hook useLocalStorage() (y como sabemos este es síncrono, requiere de tiempo). . Entonces cada vez que accedemos a las rutas /new o /edit/ debemos esperar que carguen los todos del localStorage nuevamente porque los necesitamos para las funciones addTodo() y editTodo() y aquí es donde está el problema. . Si modificamos el setTimeout() de useLocalStorage() a 5 segundos por ejemplo y luego accedemos a /new o /edit y agregamos o editamos información antes de que pasen 5 segundos habrá problemas.

En el caso de addTodo() se sobrescribirá la información, porque la constante newTodos va a ser igual a un arreglo vacío.
En el caso de editTodo() se romperá la aplicación, porque la constante todoIndex va a ser -1.

. Para solucionar esto lo que hice fue deshabilitar el <textarea> y el botón de Añadir/Editar usando el state loading de useTodos()

En newTodoPage() y EditTodoPage() agregue lo siguiente:

//use el loading y se lo pase al <TodoForm />
const { editTodo, getTodo, loading } = useTodos()

return (
	<TodoForm
		loading={loading}
		...
		...
)

En TodoForm() agregue lo siguiente:

function TodoForm(props) {
	...
	...

	return (
		...
		<textarea 
			disabled={props.loading}
			...
		/>
		<button
			disabled={props.loading}
		>
			{props.submitText}
		</button>
	)
}

Diego Reyes Cabrera

student•

¡Qué buena idea! Quiero añadir mis ideas y sumas a la implementación: Yo no deshabilité el text area, siento que frustraría al usuario.

Y en CSS agregué este selector:

.TodoForm-button--add:disabled {
	background-color: #92b5d0; //color mas oscuro
	box-shadow: none;
}

No es la mejor UX, pero me parece cheveron

Edgardo Andres Vargas Saenz

student•

Si, mi solución no es la mejor jajaja. Solo quería señalar donde era que estaba el problema y que lo estaba causando.

Bramucci Candela

student•

Previamente, había publicado un código que tenía dos errores:

al entrar directamente a una url, state (location) no existía y tiraba un error.
si el id del to-do no existía, saltaba un error

Ya corregí esos errores, dejo el nuevo código abajo.

App.js

<Route path="/edit/:id" element={<EditTodoPage />} />

EditTodoPage.js

export function EditTodoPage() {
    const { editToDo, loading, getToDo } = useToDos()
    const { state } = useLocation()
    let { id } = useParams()
    id = Number(id) //useParams converts number to text. Just in case, it is converted to number again

    let toDoText

    if (!state) {
        if (loading) return <p>loading</p>
        let toDo = getToDo(id)
        if (!toDo) return <NotFound />
        toDoText = toDo.text
    } else ({ toDoText } = state)

    return (
        <TodoForm
            submitEvent={newText => editToDo({ id, newText })}
            title="Edit To-Do"
            submitText="Edit"
            defaultText={toDoText}
        />
    )
}

Axlin Miranda

student•

Esta sería mi respuesta al retor, cualquier sugerencia estaré pendiente:

React router v6

React router v5

Adrian Villamil

student•

Para resolver el reto del minuto 13:22, leí la documentación del hook useNavigate() de React Router, y noté que la función navigate() no sólo recibe una ruta, sino también un objeto de opciones:

Y entre las opciones recibe la propiedad state, entonces desde el HomePage, agregué el objeto de opciones con la propiedad state a la función navigate(), asignándole como valor al state el texto del TODO de cada TodoItem que está siendo mapeado por el TodoList.

Luego en la página EditTodoPage, por medio del hook useLocation(), le asigné el valor del state a la propiedad defaultTodoText del componente TodoForm.

Y listo, de esta forma podemos enviar directamente el texto de cada TODO al formulario TodoForm sin necesidad de esperar los segundos para que carge el localStorage.

Raycris Maldonado

student•

Brillante! bro, saludos

Angel David Contreras Barrios

student•

Toca ver varias veces esta clase🧐🤪

Raycris Maldonado

student•

exactamente, esta clase hay que verla varias veces para poder entender bien, y el que la entienda a la primera pues en horabuena!

Juan Pablo Cortés

student•

Pensé que iba a poder con este reto, pero una vez más encontré varias formas de Como no hacerlo...XD. Aprendí que useLocation es inmutable.

Harold Zurita Simon

student•

useLocation: transferencia de datos por navegación

. Para concluir la migración de portales y modales a rutas, vamos a recuperar el texto del todo que estamos editando, para no tener que volverlo a escribir si fuera un pequeño cambio. . En el componente HomePage vamos a modificar nuestra render prop onEdit. En la navegación vamos a necesitar pasar la información del TODO que estamos modificando por medio de options, el cual vendría a ser un objeto que permite una propiedad state que nos sirve para mandar datos hacia una ruta, en este caso la ruta /edit/:id. .

onEdit={() => {
              navigate(
                '/edit/' + todo.id,
                {
                  state: { todo }
                },
              );
            }}

. En el componente EditTodoPage vamos a utilizar el react hook useLocation para recibir la información del TODO que se nos pasó por navegación en state. . Dentro de la ruta de editar TODOs tenemos 2 posibilidades para llegar a la ruta /edit/:id; es decir, por medio del botón de editar TODO o de forma directa a través de la url. . Sucede que al ingresar por la url, internamente se deben de cargar los TODOs antes de poder realizar cualquier acción. Este proceso se muestra dentro el código del react hook useLocalStorage, donde estamos simulado que estamos realizando peticiones a una API por medio de un setTimeout para obtener los TODOs. . Por esta razón, para evitar problemas de sobreescritura o similares, vamos a manejar el estado de loading que nos proporciona useTodos. Esto nos permite saber cuando terminamos de cargar los TODOs, por lo que tendremos una variable todoText que va a cambiar según la situación: .

Si accedemos por medio del botón de editar algún TODO, significa que tendremos la información del mismo en location y podremos tomar el texto de location.state.todo.text. .
Si no tenemos la información en location, significa que estamos accediendo por url y que los TODOs aún deben cargar. Por lo que si loading es verdadero entonces renderizamos un mensaje de carga. .
Si loading es falso significa que los TODOs terminaron de cargar, por lo que podemos buscar el TODO por su ID por medio de la función getTodo, y luego recuperar su texto.

. Cualquiera que sea el modo en que obtengamos el texto del TODO, vamos a pasarlo como prop defaultTodoText a FormTodo. .

import React from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { TodoForm } from '../../ui/TodoForm';
import { useTodos } from '../useTodos';

function EditTodoPage() {
  const location = useLocation();
  const params = useParams();
  const id = Number(params.id);
  
  const { state, stateUpdaters } = useTodos();
  const { loading, getTodo } = state;
  const { editTodo } = stateUpdaters;

  let todoText;
  
  if (location.state?.todo) {
    todoText = location.state.todo.text;
  } else if (loading) {
    return <p>Cargando...</p>
  } else {
    const todo = getTodo(id);
    todoText = todo.text;
  }

  return (
    <TodoForm
      label="Edita tu TODO"
      defaultTodoText={todoText}
      submitText="Editar"
      submitEvent={(newText) => editTodo(id, newText)}
    />
  );
}

export { EditTodoPage };

. En el react hook useTodos como se mencionó anteriormente se tiene a una función getTodo que recibe un id y busca el TODO entre todos los TODOs y lo retorna. A su vez, esta función se retorna dentro del objeto state. .

...

function useTodos() {
	...
  const getTodo = (id) => {
    const todoIndex = todos.findIndex(todo => todo.id === id);
    return todos[todoIndex];
  }
  ...
  
  const state = {
	  ...
    getTodo,
  };
  ...

  return { state, stateUpdaters };
}
...

export { useTodos };

. Finalmente, en TodoForm el estado incial de newTodoValue será props.defaultTodoText o un string vacío. .

const [newTodoValue, setNewTodoValue] = React.useState(props.defaultTodoText || '');

Laura Naranjo

student•

Alguien más pensó que no tiene sentido pasar la información por el location.state si de igual forma hay que esperar a que se carguen los TODOs del local storage antes de poder darle click al botón de editar/añadir ?

Por ejemplo, si se demora 10 seg en cargar los TODOs y hacemos click en editar antes de que termine la carga, la aplicación se rompe, esto lo solucioné deshabilitando el botón de editar hasta que terminara la carga... pero esa solución no me convence ya que no hay ninguna ventaja en pasar los datos por el location.state

Jose Miguel Valero Reyes

student•

"si, cambio un poquito el navegador" jajajajaj

Luis Angel Olivárez Estrada

student•

Uncaught TypeError: Cannot read properties of undefined (reading 'text')

Me aparece esto al entrar en incógnito :)

https://github.com/luiznaiper/react-task-router

Commit a11ace7 branch dev

  let todoText;

  if (location.state?.todo) {
    todoText = location.state.todo.text;
  } else if (loading) {
    return <p>Loading...</p>;
  } else {
    const todo = getTodo(id);
    todoText = todo.text;
  }

Jhunior Eduardo Guevara Lázaro

student•

es porque en la ventana de ingognito no tienes la lista guardad en localStorage

Jhunior Eduardo Guevara Lázaro

student•

es porque en la ventana de ingognito no tienes la lista guardada en localStorage

Irving Juárez

student•

Para tener una planeación del curso, parece que no se tenia un approach para resolver ciertos problemas de la app desde el principio

Armando Rivera

student•

Mi solución

Laura Naranjo

student•

Mi solución fue pasar en el NavigateOptions.state el texto del TODO cuando se navega a la ruta '/edit/:id' :

        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.id)}
            onDelete={() => deleteTodo(todo.id)}
            onEdit={() => navigate('/edit/' + todo.id, {state: {text: todo.text} })}
          />
        )}

Luego en EditTodoPage se accede a ese objeto state mediante useLocation():

function EditTodoPage(){

   const { stateUpdaters } = useTodos();
   const { editTodo } = stateUpdaters;
   const params  = useParams();
   const id = Number(params.id);
   const location = useLocation();

    return(
        <TodoForm 
            label="Edita tu Todo"
            submitText='Actualizar'
            submitEvent={(newText) => editTodo(id, newText)}
            initialText={location.state?.text}
        />
    );
}

Diego Reyes Cabrera

student•

Juan dice que esta clase fue díficil... Para mí lo fue, pero por ese bendito loading que me hizo estar debuggeando un buen rato! 😵

Diego Reyes Cabrera

student•

Me estaba sucediendo un error, muestro screenshot: !capture . Y sucedía porque me salía del NewPage hacia el HomePage sin que terminarán de cargar los todos, así que, cuando ya habían cargado y el estado loading cambia a true, el componente TodoForm ya está desmontado, y ocasiona el error. . La solución a esto es DETENER la carga de los todos al salirnos del NewPage (y EditPage también). Cómo hacemos eso? . En efecto, como nos dice el error, debemos cancelar esa carga de todos desde una Cleanup Function en nuestro useEffect que genera el setTimeout dentro de useLocalStorage. Esto es lo equivalente a un willUnmount del antiguo React.

React.useEffect(() => {
		const timeout = setTimeout(() => {
			try {
				const localStorageItem = localStorage.getItem(itemName);
				let parsedItem;

				if (!localStorageItem) {
					localStorage.setItem(itemName, JSON.stringify(initialValue));
					parsedItem = initialValue;
				} else {
					parsedItem = JSON.parse(localStorageItem);
				}

				onSuccess(parsedItem);
			} catch (error) {
				onError(error);
			}
		}, 3000);

		//CLEANUP FUNCTION
		return () => {
			clearInterval(timeout);
		};
	}, [sincronizedItem]);

David Espino

student•

Yo me propuse lograr la funcionalidad antes de ver el video de esta clase, les comparto mi solución:

Primero edité la propiedad path de la etiqueta Route que nos lleva al componente EditTodoPage para que aceptara un parámetro más:
Luego le agregé a la función navigate de onEdit el parámetro todo.text
Y por último definí ese texto como valor por defecto de newTodoValue en el componente TodoForm :)
Y listo :)

milton coronado

student•

que me recomiendas para programar mejor y no frustarme tanto? error first? lo pregunto por que en esta ruta me parece que en el primer o segundo curso lo recomendaste si no me equivoco...

Sebastian Carballo

student•

Hello warriors! Dejo mi branch/commit en inglés para enriquecer esas notas:

- [English version branch](https://github.com/SebaMat3/react-todo/tree/feat/improve-todo-edit-ux)

Branch name:

feat/improve-todo-edit-ux

Commit message:

feat: enhance UX for editing todos with preloaded text and loading improvements

- Implement useLocation to pass todo state from HomePage to EditTodoPage

- Preload todo text in EditTodoPage for better user experience

- Add loading state handling in EditTodoPage

- Update useTodos hook to support ID-based todo operations

- Improve overall navigation and state management for todos

Mejora de la Experiencia del Usuario al Editar To Do's en React

Fundamentos de navegación en la web

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalación de React Router DOM 6 en un proyecto React

Uso de Hash Router en Aplicaciones Web con React Router DOM

Creación de Rutas Dinámicas con React Router DOM 6

Navegación en React Router: Uso de Link y NavLink

Rutas dinámicas con React Router DOM y useParams

Uso de useNavigate en React Router DOM para navegación dinámica

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

Autenticación y Autorización en Apps con React Router y Hooks

Control de Acceso en Menú con Autenticación React

Protección de Rutas con React Router y Hooks

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Mejorando la Redirección Post-Login en Aplicaciones Web

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

Migración de Todo Machine a React Router 6

Organización de carpetas y rutas en React con React Router DOM 6

Maquetación de Botón Editar en Lista de Tareas con React

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

Migración de modales a rutas en React: implementación práctica

Editar ToDos en React con Custom Hook y URL Parameters

Mejora de la Experiencia del Usuario al Editar To Do's en React

Implementación de React Router en Proyectos Legacy

Próximos pasos

Filtrado de Búsquedas en URL con React Router

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

Clonación de Platzi Movies usando React y React Router

Clonación de React Router en Componentes React

Navegación Avanzada con React Router DOM 6