Thread by @matiasfha

#React
useEffect y los estados del ciclo de vida de un componente.
Son comparables? Funcionan igual? Es uno del reemplazo del otro?.
No, no, y no, pero ¿por qué?
Intentaré resumirlo en este breve nuevo hilo 🧵

Primero, creo que este post de @dan_abramov lo explica completamente overreacted.io/a-complete-gui…

Los estados del ciclo de vida son una definición y concepto utilizados en los componentes de clase, esos definidos antes del advenimiento de hooks utilizando la sintaxis `class`

Estos componentes implementan algunos métodos que te permiten ejecutar lógica en ciertos "momentos". Y esto es importante. La ejecución de esta lógica esta relacionada con un momento particular del proceso de renderizado de un componente.

El hook useEffect por su parte si bien puede efectuar las mismas funciones que algunos métodos del ciclo de vida no son directamente comparables (y no debería hacerse) ya que el concepto y modelo mental tras su implementación es diferente.

useEffect se trata sobre *sincronizar* el estado interno de un componente con algún estado externo, por ejemplo obtener datos desde una api o modificar algo en el DOM.

useEffect ejecuta un efecto (side effect) definido como primer argumento a modo de callback

Este efecto es ejecutado cada vez que uno de los valores del arreglo de dependencias (segundo parámetro) ha cambiado.
Y eso es todo!. El efecto no se ejecuta en relación a un momento del renderizado, ergo, no hay ejecución al montar o recibir props. Solo..

El efecto sólo se ejecuta cuando una dependencia cambia, he ahí la importancia de hacerle caso al plugin de eslint npmjs.com/package/eslint… y no saltarse la definición de dependencias.
¿Entonces cuál es la gran diferencia?

El gran cambio aquí es que a la hora de definir tu componente no debes pensar en el cuando (en relación al tiempo) se ejecutará el efecto, si no, en el por qué el efecto se ejecuta (cambio en una dependencia).
matiashernandez.dev/que-son-los-ho…
Y
matiashernandez.dev/algunos-errore…

Finalmente si bien puede que te haga sentido hacer la comparación y relación con la implementación del ciclo de vida esto puede ser detrimental ya que puede llevar a malas prácticas en su implementación, cómo el no uso del arreglo de dependencias u obviar algunas.

Para aprender hooks, y en particular useEffect, debes dejar de compararlo con la forma previa, sobre todo si tan sólo estás comenzando con #React

Si estás comenzando con #React, sigue atento al curso "Pensando en React" para @eggheadio que está en progreso!!
Únete al newsletter para mantenerte al tanto.
matiashernandez.ck.page

Esto merecía un breve post

h.matiashernandez.dev/react-useeffec…