No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Notificando cambios con StorageEventListener

14/19
Recursos

Aportes 12

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 馃榿

Y recuerden amigos, si quieren usar TypeScript para completar este curso, deben de usar la extension correcta en sus archivos. Tuve un error raro que no entendia y demore una hora en encontrarlo. Al final era que el archivo debia ser .tsx en lugar de .ts.

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}

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 }

Esta clase estuvo fuerte xd

Yo quiero ese curso de optimizaci贸n de apps en React Uwu

ChangeAlert/withStorageListener.js

import React, { useState } from 'react'

export const withStorageListener = (WrappedComponent) => {
    return function WrapedComponentWithStorageListener() {
        const [storageChange, setStorageChange] = useState(false)
        return (
                <WrappedComponent 
                    show={storageChange}
                    toggleShow={setStorageChange}
                />               
        )
    }
}

ChangeAlert/index.js

import React from 'react鈥
import { withStorageListener } from 鈥./withStorageListener鈥

const ChangeAlert = ({show, toggleShow}) => show && <p>hubo cambios!</p> || null

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert)

export {ChangeAlertWithStorageListener};
ChangeAlert/index.js

Tenia esta duda hace un tiempo, de que pasaria si se hacen cambios al mismo storage por ejemplo.
Con este curso estoy sacando algunas dudas que tenia, como cuando pensaba una solucion mas sencilla o alternativa a context como vimos composicion de componentes y colocacion de estado.