Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Notificando cambios con StorageEventListener

14/19
Recursos

Aportes 7

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🤔 Pero ¿profe Juan, por qué haces como que no ves la advertencia de missing dependencias en la consola?
.
🌈 Los efectos son un tema espectacularmente divertidísimo dentro de React. Una de sus particularidades consideradas entre las más avanzados son las actualizaciones al estado dentro de los efectos y cómo estas afectan a los renders de nuestros componentes.
.
Si quieres que estudiemos este tema con la profundidad que merece, responde este comentario con un enorme 💚 y pondremos todo nuestro esfuerzo en grabar un Curso de React.js: Optimización de Render y Debugging.

Si les sale un error y quieren arreglarlo, en ChangeAlert luego del if añadan un else y retornen lo que deseen. Esto pasa a que si la condición no se cumple, nunca retornarás algo.

Una herramienta excelente para ver de forma visual en nuestras aplicaciones cada que nuestros componentes se renderizan, es la extensión para los navegadores basados en chrome, React DeveloperTools

La cual se integra con el chrome developer tools del navegador, y activando la opcion Highlight updates when components render. dentro de la pestaña de Profiler, activaremos la delineación de aquellos componentes que cambian de estado.

Hace unas cuantas lecciones preguntaba qué se podía hacer para evitar esa recarga, que ya había evidencia con Console.log. Ahora ya sé por qué! Jajajaja 🤣
Estoy feliz porque ya puedo dormir, no me sacaba la idea de la cabeza de que algo andaba mal con mi aplicación 😁

Codigo de
ChangeAlert/withStorageListener.js
me tome la libertad de agregar un else, o si no el codigo colapsa, haz al prueba.

import React from "react";
import { withStorageListener } from "./withStorageListener";

function ChangeAlert({ show, toggleShow }) {
    if(show){
        return <p>Habra cambios</p>;
    } else{
        return null;
    }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener }

ChangeAlert/index.js

import React from "react";
import { withStorageListener } from "./withStorageListener";

function ChangeAlert({ show, toggleShow }) {
    if(show){
        return <p>Habra cambios</p>;
    } else{
        return null;
    }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener }

ChangeAlert/withStorageListener.js

import React from "react";

function withStorageListener(WrappedComponent) {
    return function WrappedComponentWithStorageListener(props) {
        const [storageListener, setStorageListener] = React.useState(false);
        return (
            <WrappedComponent
                show={storageListener}
                toggleShow={setStorageListener}
            />
        );
    }
}
export { withStorageListener };

ChangeAlert/index.js

import React from "react";
import { withStorageListener } from "./withStorageListener";

function ChangeAlert({show,toggleShow}) {
  if (show) {
    return <p>Hay Cambios!!!</p>;
  }else{

    return <p> No Hay Cambios!!!</p>;
  }

}
const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);
export { ChangeAlertWithStorageListener };

Por el momento va de esta forma, el retorno lo deje con fragment vacío, igual podría ser null o con algún mensaje. ya que se debe si o si retornar algo para evitar que se rompa.
ChangeAlert/index.js

import React from 'react';
import { WithStorageListener } from './withStorageListener';

const ChangeAlert=({show,toggleShow})=>{
    if(show){return <p>Hubo cambios</p>}
    else{return <></>}
}

const ChangeAlertWithStorageListener = WithStorageListener(ChangeAlert)
export {ChangeAlertWithStorageListener}

ChangeAlert/WithStorageListener.js

import React from 'react';

const WithStorageListener=(WrappedComponent)=>
{
return function WrappComponentWithStorageListener(props){
 const [storageChange,setStorageChange]= React.useState(false)
    return (
    <WrappedComponent
    show={storageChange}
    toggleShow={setStorageChange}
    />
    )
}
}

export {WithStorageListener}