Sincronización de Cambios en React con StorageListener

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:17

Sincronización de Cambios en React con StorageListener

Curso de React.js: Patrones de Render y Composición

Clase 14 de 19

Clase 14 / 19

Recursos

¿Cómo aprovechar los high-order components en React para detectar cambios de estado?

Te has preguntado alguna vez cómo facilitar la sincronización de datos en aplicaciones React que se ejecutan en varias pestañas del navegador? Descubrirás a través de los high-order components y los eventos JavaScript cómo optimizar el rendimiento y evitar renderizaciones innecesarias. Esta guía te llevará por el proceso de implementación paso a paso, asegurando que comprendas y apliques estos conceptos a tus propios proyectos de React.

¿Qué hacer con los errores de sincronización de datos en múltiples pestañas?

Al trabajar con aplicaciones de React que acceden al Local Storage, es común enfrentar problemas de sincronización de datos cuando actualizaciones se realizan en diferentes pestañas del navegador. Esto se debe a que, por defecto, los cambios no se propagan automáticamente entre las sesiones. Aunque el uso de setTimeout para detectar cambios cada cierto tiempo puede parecer una solución, resulta ineficiente a largo plazo y afecta el rendimiento de la aplicación.

¿Cómo afecta el rendimiento el uso ineficiente de efectos en React?

A menudo usamos efectos en React para manejar actualizaciones de estado, pero olvidamos optimizarlos. La clave está en controlar cuándo deben ejecutarse los efectos. El uso incorrecto de efectos, como llamar repetidamente un efecto al no especificar adecuadamente las dependencias, puede causar múltiples renderizaciones no deseadas. Para evitarlo, podemos pasar un array vacío [] como segundo parámetro en useEffect, asegurando así que el efecto solo se ejecute al montar el componente.

¿Cómo utilizar los eventos del navegador para detectar cambios de datos?

Para manejar de manera efectiva la sincronización entre pestañas, podemos valernos del evento storage. Este evento se dispara en los documentos cuando el almacenamiento local detecta que un cambio ha sido realizado por otra pestaña. Implementa un EventListener para este evento, que te permitirá recibir información sobre cambios ocurridos, incluidos el elemento modificado y su nuevo valor.

window.addEventListener('storage', (event) => {
  console.log(event);
});

¿Cómo crear el componente Change Alert?

El primer paso es construir un componente que nos alerte sobre cambios en el almacenamiento local. Además, crearemos un high-order component (HOC) que integra este listenener y controla cuándo el componente debería mostrar la alerta.

Definir el componente Change Alert:

import React from 'react';

function ChangeAlert() {
  return null;
}

export default ChangeAlert;

Crear el HOC withStorageListener:

import React, { useState } from 'react';

function withStorageListener(WrappedComponent) {
  return function WrappedComponentWithStorageListener(props) {
    const [storageChange, setStorageChange] = useState(false);

    window.addEventListener('storage', () => {
      setStorageChange(true);
    });

    return <WrappedComponent show={storageChange} toggleShow={setStorageChange} {...props} />;
  };
}

¿Cómo integrar el high-order component en la aplicación?

Ahora que tenemos nuestro HOC, es momento de integrarlo al componente Change Alert y comprobar cómo el evento de almacenamiento notifica sobre cambios.

Combinar el componente Change Alert con el HOC:

import ChangeAlert from './ChangeAlert';
import withStorageListener from './withStorageListener';

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);
export default ChangeAlertWithStorageListener;

Usar el componente en App.js:

import ChangeAlertWithStorageListener from './ChangeAlertWithStorageListener';

// ...

function App() {
  return (
    <div>
      {/* ...otros componentes */}
      <ChangeAlertWithStorageListener />
    </div>
  );
}

Con estos pasos, no solo optimizas el rendimiento de tus aplicaciones React, sino que también introduces un mecanismo robusto para mantener la coherencia de datos entre múltiples pestañas del navegador. ¡Adelante y sigue experimentando con high-order components para llevar tus proyectos al siguiente nivel!

Max Andy Diaz Neyra

Hace 3 años

Hola comunidad platzi, les dejo el codigo de la clase en TypeScript (lo cual estuvo bastante retador):

import { FC, useState } from "react"

function withStorageListener<T>(
    WrappedComponent: FC<T>
) {
    return function WrappedComponentWithStorageListener(props:Omit<T, "show" | "toggleShow">){
        
        const [storageChange, setStorageChange] = useState(false);

        return (
            <WrappedComponent 
                {...(props as T)}
                show={storageChange}
                toggleShow={setStorageChange}          
            />
        )
    }   
}

export { withStorageListener }

import { Dispatch, SetStateAction, FC } from 'react'
import { withStorageListener } from "./withStorageListener"

interface Props {
    show: boolean,
    toggleShow: Dispatch<SetStateAction<boolean>>,
}

const ChangeAlert:FC<Props> = ({
    show,
})=> {
    if(show){
        return(
            <p>¿Hubo cambios?</p>
        )
    } else {
        return null
    }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener }

import { FC } from 'react'

import { TodoButton } from "../TodoButton"
import { TodoCounter } from "../TodoCounter"
import { TodoItem } from "../TodoItem"
import { TodoList } from "../TodoList"
import { TodoSearch } from "../TodoSearch"
import { TodosError } from "../TodoError"
import { EmptyTodos } from "../EmptyTodo"
import { TodosLoading } from "../TodoLoading"
import { Modal } from "../Modal"
import { TodoForm } from "../TodoForm"
import { TodoHeader } from "../TodoHeader"
import { useTodos } from './useTodos'
import { ChangeAlertWithStorageListener } from '../ChangeAlert'

const App: FC = () => {

  const {
    loading,
    error,
    searchedTodos,
    addTodo,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    completedTodos,
    totalTodos,
    searchValue,
    setSearchValue,
  } = useTodos();

  return (
    <>
      <TodoHeader
        loading={loading}
      >
        <TodoCounter
          completedTodos={completedTodos}
          totalTodos={totalTodos}
          // loading={loading}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          // loading={loading}
        />
      </TodoHeader>
      <TodoList
        loading={loading}
        error={error}
        onLoading={()=>(
          <>
            <TodosLoading />
            <TodosLoading />
            <TodosLoading />
          </>
        )}
        onError={()=>(
          <TodosError />
        )}
        onEmpty={()=><EmptyTodos />}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        totalTodos={totalTodos}
        onEmptySearchResults={
          (searchText)=>(<p>No hay resultado para {searchText}</p>)
        }
        // render={(todo) => (
        //   <TodoItem
        //     key={todo.text}
        //     text={todo.text}
        //     completed={todo.completed}
        //     onComplete={() => { completeTodo(todo.text) }}
        //     onDelete={() => { deleteTodo(todo.text) }}
        //   />
        // )}
      >
        {
          (todo) => (
            <TodoItem
              key={todo.text}
              text={todo.text}
              completed={todo.completed}
              onComplete={() => { completeTodo(todo.text) }}
              onDelete={() => { deleteTodo(todo.text) }}
            />
          )
        }
      </TodoList>
      <TodoButton setOpenModal={setOpenModal} />

      {
        openModal && (
          <Modal>
            <TodoForm
              addTodo={addTodo}
              setOpenModal={setOpenModal}
            />
          </Modal>
        )
      }

      <ChangeAlertWithStorageListener />
    </>
  )
}



export default App

Carlos Javier Contreras Miquilena

Hace 3 años

"WrappedComponent" hace referencia a un valor, pero aquí se usa como tipo. ¿Quiso decir "typeof WrappedComponent"?ts(2749)

me dice esto :(

Comentarios (24)24 comentarios

Juan Castro

Profesor

Hace 5 años

Bruno Cal

Mauro Brandan Valdez

Daniel Reyes

Julian David Toro Medina

Said Cueter

Hace 4 años

Ansony Méndez

Kevin Figuera

Johangly Sucre

Jennifer Coceres

Andrés Esteban Rodríguez Jiménez

Joel Carlos Condori Callisaya

Kevin Toruño

Hace un año

ZANONI ALFREDO SALAS TOBÓN

César Palma

Saul Burgos

Federico Ivan Llano

Ing. Moisés Toro

Daniel Alberto Vega Bejarano

Norman Jaimes Mora

Hace 2 años

Brayan Ramirez Alzate

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Sincronización de Cambios en React con StorageListener

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos