Conversión de HighOrder Component a Custom Hook en ReactJS

Prefiero mucho más los Hooks, me parece que HOC agregan más pasos y hacen más robusto el código.

Sin duda los hooks hacen mas legible el codigo y mas pratico de implementar

para mi los HOC hacen ver el código más elegante , pero como pasa en el diseño, primero está la funcionalidad XD. Sin duda los custom Hooks son más fáciles de leer.

Inicie aprendiendo React escribiendo la mayor parte del código con hooks y me parece que para la lógica de compartir los datos es la mejor manera; sin embargo, no dejaría de lado combinar el código con render props, ya que, para maquetación me parece que es más intuitivo.

Prefiero los hooks

El alivio que se siente que el profe Juan al final haya elegido los custom hooks no se puede explicar, estaba empezando a dudar de que React tuviese el proposito de crear nuestro sistema de forma mas facil. Es bueno conocer los HOC sin duda nos pueden ayudar en alguna ocacion especifica pero en sentido general la diferencia para mi es muy grande

Creo que al igual que todos en la sección de comentarios, prefiero los Hooks xd

Prefiero los Hooks más si estas aprendiendo a trabajar con React porque los HOC tienen muchos pasos esto causa confución y muchas veces nos perdemos en e código.

Agregue la opción de no recargar. Ya que era casi obligatorio y no tendría sentido el botón.

useStorageListener.js

    const toggleShow = (even) => {
        if (even) {
            setStorageChange(false)        
        }else{
            sincronize();
            setStorageChange(false)            
        }    
    };

ChangeAlert/index.js

<div className="ChangeAlert-container">
          <p>Hubo cambios</p>
          <p>¿Desea recargar?</p>
          <button
            className="TodoForm-button TodoForm-button--add"
            onClick={() => {
              toggleShow(false);
            }}
          >
            Yes
          </button>
          <button
            className="TodoForm-button TodoForm-button--add"
            onClick={() => {
              toggleShow(true);
            }}
          >
            do not update
          </button>
        </div>

Me interesaba aprender HOC en React pues era un concepto que aparecia de vez en cuando y no sabia muy bien por donde empezar.

Ahora se como se hacen. Y el caso de uso que le veo son con aquellos componentes basados en clases o incluso para añadirle funcionalidades a componentes de las librerias

En general me gusto el curso, suministro varios conceptos u otras formas de crear un proyecto, y no son ni mejor ni peor que otros, cada uno tiene su razon de uso…en lo particular me gusta mas usar React;Context, hace mucho mas facil suministrar informacion de un componente a otro

y en lo particular la forma de arreglar el problema de tener tantas carpetas por componentes, sobre todo en proyectos grandes es combinar ambos mundos

crear carpteas por componentes grandes, por el Header, y dentro de la carpeta Header hacer un composicion interna de sus componentes internos (Nav, Logo, Login, etec)

asi podria quedar un proyecto organizado y facil de actualizar y mejorar

es mi punto de vista actual, quizas mas adelante mientras vaya adquiriendo mas experiencia y adquiriendo mas conocimientos cambie mi forma de pensar

En este caso definitivamente con hook es más simple y legible. Buena clase🙌

React Hooks!!

Cambiando HOCS POR HOOKS

Cambiando HOCs por React Hooks

.
Lo primero que se hace es cambiar el nombre del archivo, del HOC y su correspondiente export de withStorageListener a useStorageListener, esto con el objetivo de dar a entender que estamos cambiando un HOC por un React Hook.
.
Se elimina los returns de funciones que tenía el hook y también dejamos de pasar como parámetro al WrappedComponent y de hecho ya no lo vamos a utilizar.
.
Finalmente, lo más importante es que ahora retornamos un objeto con la información que queremos pasar a los componentes, en este caso show y toggleShow.
.

import React from 'react';

function useStorageListener(sincronize) {
  const [storageChange, setStorageChange] = React.useState(false);
  
  window.addEventListener('storage', (change) => {
    if (change.key === 'TODOS_V1') {
      console.log('Hubo cambios en TODOS_V1');
      setStorageChange(true);
    }
  });

  const toggleShow = () => {
    sincronize();
    setStorageChange(false);
  };

  return {
    show: storageChange,
    toggleShow,
  };
}

export { useStorageListener };

.
Por otro lado desde el componente ChangeAlert lo que se hizo fue importar y hacer uso del React Hook y por lo tanto ya no es necesario envolver el componente en el HOC y se elimina lo que es el ChangeAlertWithStorageListener y exportamos directamente al componente ChangeAlert.
.

import React from 'react';
import { useStorageListener } from './useStorageListener';
import './ChangeAlert.css';

function ChangeAlert({ sincronize }) {
  const { show, toggleShow } = useStorageListener(sincronize);
  
  if (show) {
    return (
      <div className="ChangeAlert-bg">
        <div className="ChangeAlert-container">
          <p>Parece que cambiaste tus TODOs en otra pestaña o ventana del navegador.</p>
          <p>¿Quieres sincronizar tus TODOs?</p>
          <button
            className="TodoForm-button TodoForm-button--add"
            onClick={toggleShow}
          >
            Yes!
          </button>
        </div>
      </div>
    );
  } else {
    return null;
  }
}

export { ChangeAlert };

.
Desde el componente App cambiamos al componente ChangeAlertWithStorageListener por directamente ChangeAlert.
.
Debido a que este tiene unna propiedad sincronize se tendrá que recibir como parámetro en el componente ChangeAlert y en el React Hook useStorageListener haciendo los cambios pertinentes.
.

function App() {
	...
	return (
    <React.Fragment>
			<ChangeAlert
	      sincronize={sincronizeTodos}
	    />
		</React.Fragment>
	);
}

Team Hooks, los HOC me parecen mas complicado de leer siendo un nuevo miembro del equipo

Mis apuntes en Notion💚

jmmm creo que dependera mucho del caso el si usamos o no, los custom Hooks o los HOCs, de preferir me parecen mejor los los Custom Hooks