Actualizando estados desde useEffect

Resumen

¿Cómo corregir la implementación de useLocalStorage?

Al trabajar con useLocalStorage, debemos asegurarnos de que su lógica no solo almacene correctamente la información, sino que también gestione los estados de carga (loading) y errores (error) de forma adecuada. Este proceso es fundamental, ya que un error podría afectar la experiencia del usuario al interrumpir o detenerse incorrectamente la carga de datos.

¿Cómo manejar el estado de carga y el error?

Actualizar el estado de carga al completar tareas: Cuando el useEffect finaliza la carga desde localStorage, es esencial notificar a la aplicación que la acción ha finalizado. Esto se logra actualizando el estado loading a false una vez que los datos han sido obtenidos con éxito.
Gestionar errores con try-catch: Usando un bloque try-catch, podemos capturar los errores que pudieran ocurrir durante el acceso a localStorage, y actulizar el estado de error respectivamente. Esto ayuda a prevenir fallos inesperados en la aplicación.
Cancelar la carga si ocurre un error: Si se detecta un error durante el proceso, debemos desactivar el estado de carga para evitar que la aplicación continúe asumiendo que los datos están en proceso de carga.

¿Cómo manejar el estado inicial y las actualizaciones?

Para manejar el estado del item efectivamente, es vital:

Comparar y actualizar datos: Si el initialValue en el estado item es distinto de lo almacenado en localStorage, debemos actualizar el estado para reflejar los datos más recientes.

if (parsedItem !== initialValue) {
    setItem(parsedItem);
}

¿Qué hacer si encuentras errores inesperados?

Limpiar localStorage: Durante la fase de desarrollo, puede ser útil limpiar el localStorage para eliminar cualquier estado corrupto que pueda interferir con el correcto funcionamiento del código.

localStorage.clear();

¿Cómo corregir problemas de renderización continua en `useEffect`?

El useEffect puede causar un ciclo de renderización infinita si no se maneja con cuidado. Para evitarlo:

Agrega dependencias: Asegúrate de especificar las dependencias del useEffect correctamente para que solo se ejecute cuando sea necesario, y no en cada render.

useEffect(() => {
    // Efecto asíncrono
}, [dependencia]);

¿Cómo simular latencia de red al cargar datos?

Para simular la demora que podría implicar una consulta a una API o recurso de red, usamos setTimeout dentro del useEffect.

useEffect(() => {
    const timer = setTimeout(() => {
        // lógica que simula el tiempo de carga
    }, 2000); // 2000 milisegundos, es decir, 2 segundos

    return () => clearTimeout(timer);
}, []);

¿Cómo evitar renderizados innecesarios?

Los errores de actualización redundante frecuentes pueden mitigarse protegiendo el useEffect para que solo se ejecute una vez al cargar la aplicación y no cada vez que se actualiza un estado.

Comentarios y solución

En situaciones de errores complejos, revisar la implementación y verificar su lógica interna es fundamental. A veces, el error está en detalles mínimos pero esenciales, como faltas de ortografía o errores en la lógica de secuencia. Este tipo de problemas son comunes y resolubles, y es crucial no desesperarse, sino abordar la solución paso a paso.

¡No te desanimes! Cada error es una oportunidad de aprendizaje, así que sigue explorando y desarrollando tus habilidades en ReactJS.

Kalet Adonay Chavez Alas

student•

Bueno busque y lo que falta es una coma y un array,resulta que useEffect recibe un segundo parametro llamado: 'Arreglo de dependecias', este especifica cuando el efecto debe ser ejecutado,es por eso que al querer ejecutarlo una vez solo se deja el array vacio:

 React.useEffect(()=>{
  setTimeout(()=>{
    const localStorageItems = localStorage.getItem(itemName)
    let parsedItem;
      if (!localStorageItems) {
        localStorage.setItem(itemName, JSON.stringify(initialValue));
        parsedItem = initialValue;
      } else {
        parsedItem = JSON.parse(localStorageItems);
        setItem(parsedItem)
      }
      setLoading(false)
  },2000);
  }, [])

Asi quedaria el codigo corregido!!

Daniel Fernando Reyes Vasquez

student•

Se te olvido el try catch

Daniel Merchán Cáceres

student•

Para resolver el ejercicio, solo hay que agregar al used effect un array vacio , [ ] para que no se ejecute automaticamente.

Anthony Paiva

student•

hay que colocar ",[]" para que el useEffect no caiga en un bucle infinito, gracias por las explicaiones JDC eres un crack

Alex Fabian Carvajal Figueroa

student•

Me di cuenta tarde hasta que escuché el ventilador de mi pc y el navegador se congelo

Gabriel Arias

student•

De esta manera cuando carga no muestra ninguna información, así se ve más limpio el diseño. Hice un componente loading con un SVG animado para que muestre eso mientras carga. También agregué unas condicionales por que no tiene sentido que muestre el TodoCounter si no hay todos.

return (
    <div className="App">
      {!loading? <>
        <TodoSearch 
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />  
        {searchedTodos.length===0? <></>: <TodoCounter total={totalTodos} completed={completedTodos}/>}    
          <TodoList>
            {error && <p>We have an error. Refresh please!</p>}
            {!loading && searchedTodos.length===0 && <p>Make your first TODO!</p>}
            {searchedTodos.map(todo=>(
              <TodoItem
              key={todo.text} text={todo.text} completed={todo.completed} onComplete={()=>completeTodos(todo.text)} onDelete={() => deleteTodo(todo.text)}
              />
            ))}
          </TodoList>
          <CreateTodoButton/>
          </>: <Loading/>}
    </div>
  );

Raycris Maldonado

student•

El error del useEffect es que falta el arreglo de dependencias que va como segundo argumento, si no le ponemos ese array vacio en este caso, causara un error algo asi como "to many renders"

El codigo quedaria algo asi:

useEffect(() => {
    // todo el codigo que esta dentro del useEffect
  }, []);

Brenda Sutara

student•

Gracias

Edgar Oliveros

student•

A mi nunca me dio errores, nunca me habia preocupado de no ver un error .__.

Diego Fernando Pallares Ramirez

student•

Si ponen un console.log desde la función App de App,js veras como ese console.log se esta apareciendo cada 2 segundos.

Alexander Flores Rayme

student•

JAJAJ yo también me preocupe por no tener el mismo error que el profe xd, pero también quiere decir que estuve mas atento lml 😎

Andre Huaman Yovera

student•

El aviso que estás viendo es una advertencia del linter (en este caso ESLint) sobre el uso del hook useEffect en tu archivo useLocalStorage.js. La advertencia indica que necesitas proporcionar una lista de dependencias para el hook useEffect para evitar una cadena infinita de actualizaciones.

Aquí tienes el código corregido con la lista de dependencias adecuada en el hook useEffect:

import React from "react";

function useLocalStorage(itemName, initialValue) {
  const [item, setItem] = React.useState(initialValue);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    try {
      let localStorageItem = localStorage.getItem(itemName);

      let parsedItem;

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

      setLoading(false);
    } catch (error) {
      setLoading(false);
      setError(true);
    }
  }, [itemName, initialValue]); // Agregar itemName e initialValue como dependencias

  const saveItem = (newItem) => {
    localStorage.setItem(itemName, JSON.stringify(newItem));
    setItem(newItem);
  };

  return { item, saveItem, loading, error };
}

export { useLocalStorage };

En esta versión corregida, he añadido [itemName, initialValue] como segundo argumento al hook useEffect, lo que indica a React que debe ejecutar el efecto solamente cuando cambien itemName o initialValue. Esto previene la posibilidad de un ciclo infinito de actualizaciones. . By CHATGPT

Brayan Jeshua

student•

, []

Edgar Oliveros

student•

Por estar jugando jajja estas clases estan demasiado buenas

Bryan Enrique Garay Benavidez

student•

Hola Comunidad Platzi! A continuación les dejo mis apuntes de las 2 últimas clases sobre estados de Carga y Error con un paso a paso de los cambios realizados en nuestros archivos y unos bonus con mi aporte personal, espero les sea de ayuda: https://drive.google.com/file/d/1_eCnRWFm5vbv4JxG57ik-jtRhESCbIMj/view?usp=sharing

Un preview del pdf:

JUAN JOSE HERNANDEZ MUÑOZ

student•

, [ ]

N40 M10

student•

El error es más profundo de lo que parece, curioso que nadie se dio cuenta:

https://github.com/facebook/react/issues/14920

Juan Castro

teacher•

Mira el reto al final de la clase y los comentarios de la clase. :pray:

Hector Rodriguez

student•

Me aparecio el mismo error, asi que anexe el initialValue y el itemName para corregirlo y funciono.

Carlos Esteban León Pinilla

student•

Como comentarón compañeros, es solo poner:

}, [])

Al final del useEffect 😃

Libian María Hernández Gil

student•

Wouuu, esta clase si me voló la cabeza jjjjj... No sé cuántas veces la tendré que ver para asimilarla jjj ...

Juan Castro

teacher•

Cómo te puedo ayudar, Mari?

Libian María Hernández Gil

student•

Gracias Juan... El curso está súper, sólo que para mi mejor asimilación debo ir con más detalle. A veces me siento abrumada con tanta información y siento que no logro dominarla, eso me preocupa. Creo que me ayudaría estudiar un esquema que contenga el funcionamiento general entre componentes, en función a las props, los estados.... y su resultado en el DOM. Por cierto, a ilustración de la fábrica del render está genial, esa representación visual de los elementos y su resultado en el DOM es muy explicativa.
PD..¿Qué otro curso me recomendarias para complementar éste?

Francisco Salazar

student•

Mis notas de useEffect: -Efectos de react React.useEffect( () => { guardamos aquí la parte pesada o demorada de la aplicación }, segundo argumento, ejemplo: [] array vacio )

Si no se pasa el segundo argumento deja de último lo que está dentro de la función, pero sigue ejecutando.
Si se pasa el arreglo vacio, en el primer render ejecuta al igual que el caso 1, pero al causar nuevos renders como escribir en el input nunca se ejecuta de nuevo, solo se ejecuta una vez.
Si pasamos un estado derivado al array, ejemplo, totalTodos, el código de la función se ejecuta cada vez que cambia el estado totalTodos.

SANDRA JULIETA CÓRDOBA ARVELO

student•

agregar el segundo argumento

Johanna Apure Canónico

student•

Por que no ponemos setLoading(false) fuera del catch? no se ejecutara al final de todos modos y ahorrarnos una linea?

Daniel Fernando Reyes Vasquez

student•

Si puede ser una buena idea

José Ramón Simo Guerra

student•

Super el curso

Desarrollo metabiblioteca

student•

La solución del ejercicio es en el useEffet para que no quede en un bucle es colocar , []. Ej: React.useEffect(() => { }, []);

Nazareno Rosales

student•

Es por este error que me acostumbré a SIEMPRE que hago un useEffect escribir primero la función con su array de dependencias y después si empezar con la lógica.

ej: useEffect( ( ) => { }, [ ] );

ahora si useEffect( ( ) => {

//mi código

}, [ ] );

Actualizando estados desde useEffect

¿Cómo corregir la implementación de useLocalStorage?

¿Cómo manejar el estado de carga y el error?

¿Cómo manejar el estado inicial y las actualizaciones?

¿Qué hacer si encuentras errores inesperados?

¿Cómo corregir problemas de renderización continua en useEffect?

¿Cómo simular latencia de red al cargar datos?

¿Cómo evitar renderizados innecesarios?

Comentarios y solución

¿Cómo corregir problemas de renderización continua en `useEffect`?