Estados de carga y error

¿Cómo implementar estados de carga y error en una aplicación React usando hooks?

En las aplicaciones web actuales, los estados de carga y error son vitales para mejorar la experiencia del usuario, pues permiten informar al usuario sobre lo que ocurre en segundo plano. En este artículo, exploraremos cómo implementar estos estados de forma efectiva en una aplicación React utilizando un Custom Hook.

¿Cómo simular un retraso en el almacenamiento local?

Simular un retraso en la obtención de datos de localStorage nos ayuda a comprender cómo manejar datos asincrónicos en nuestra aplicación. Aunque localStorage suele ser rápido y síncrono, es relevante aprender a gestionar posibles demoras. Para lograr esto:

1. Usamos setTimeout para encapsular llamadas dentro de un retardo predefinido (por ejemplo, dos o tres segundos).
2. Devolvemos los datos simulando que provienen de una fuente asincrónica.

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = React.useState(initialValue);

  React.useEffect(() => {
    const retrieveData = async () => {
      await new Promise(resolve => setTimeout(resolve, 2000));
      const item = window.localStorage.getItem(key);
      item ? setStoredValue(JSON.parse(item)) : setStoredValue(initialValue);
    };
    retrieveData();
  }, [initialValue, key]);

  return [storedValue, setStoredValue];
};

¿Cómo manejar estados de carga y error?

Para mantener a los usuarios informados sobre la carga y posibles errores:

1. Creamos dos estados mediante el hook useState: loading y error.
2. loading inicializa a true y cambia a false cuando los datos han sido cargados.
3. error se inicializa en false, cambiando a true en caso de ocurrir un error.

const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(false);

React.useEffect(() => {
  async function fetchData() {
    try {
      // Simular retraso
      await new Promise((resolve) => setTimeout(resolve, 2000));
      const item = window.localStorage.getItem(key);
      // Manejar datos
      item ? setStoredValue(JSON.parse(item)) : setStoredValue(initialValue);
    } catch (err) {
      setError(true);
    } finally {
      setLoading(false);
    }
  }
  fetchData();
}, [key, initialValue]);

¿Cómo mostrarlos en la interfaz?

Finalmente, mostramos mensajes adecuados según el estado:

• Cargando: Mostramos un mensaje simple como "Estamos cargando..."
• Error: Usamos un mensaje llamativo para indicar problemas, como "¡Hubo un error!"
• Sin elementos: Cuando el array está vacío, indicamos al usuario que puede empezar a añadir elementos.

return (
  <div>
    {loading && <p>Estamos cargando...</p>}
    {error && <p>¡Hubo un error!</p>}
    {!loading && !error && storedValue.length === 0 && <p>Crea tu primer todo</p>}
    {!loading && !error && storedValue.map(todo => <Item key={todo.id} {...todo} />)}
  </div>
);

Recomendaciones finales

Cuando trabajamos con Custom Hooks que retornan múltiples valores, seguir las siguientes prácticas mejora la claridad de nuestro código:

• Retornar los valores dentro de un objeto en vez de un array para clarificar el significado de cada valor.
• Usar destructuración nombrada en el componente que consume el hook.

const { item, loading, error } = useLocalStorage('todos', []);

Este enfoque garantiza que nuestros componentes sean mantenibles y entendibles a largo plazo. ¡Sigue explorando y aplicando estas técnicas para optimizar la UX en tus aplicaciones React!