Este es un breve post para de forma resumida aclarar algunos conceptos respecto al uso del hook useEffecty su relación con los estados del ciclo de vida de un componente.

¿Cómo se relacionan el hook useEffect y los estados del ciclo de vida?

¿Es posible comparar ambas implementaciones?, ¿Es uno el reemplazo del otro?

Un gran recurso sobre este particular hook es el artículo publicado por Adan Abramov en su blog

Los estados del ciclo de vida son una definición y concepto utilizados en los componentes de clase. Estos componentes eran la única forma de escribir componentes que tuvieran estado interno antes del advenimiento de hooks.

Para esto se utiliza la sintaxis de clase de ES6 como en el siguiente ejemplo.

class Componente extends React.Component {
    constructor(props) {
      super(props);
      this.state = {something: 'some value'};
    }
    componentWillMount() {...}
    componentDidMount() {...}
    componentWillUnmount() {...}
    componentDidUpdate() {...}
}

Este tipo de component implementa diferentes métodos que te permiten ejecutar alguna lógica en base a un "momento" dado durante el proceso de renderizado del componente. Y esto es importante:

La ejecución de estos métodos esta relacionada con el tiempo como variable adyacente.

Cada uno de estos métodos depende del momento en el que el componente se encuentre y la decisión de que lógica agregar a cada uno está basada en este concepto.

El hook useEffect nace dentro de una nueva api ofrecida por React para permitir crear componentes que contenga estado de una forma funcional, es decir, con componentes implementados como función. Si bien este hook puede obtener los mismos resultados que algunos métodos del ciclo de vida, estos, no son directamente comparables (y no debería hacerse) ya que el concepto y modelo mental trás 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.

Relacionado: Algunos errores comunes al utilizar React hooks

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 modelo conceptual!. El efecto no se ejecuta en relación a un momento del renderizado, ergo, no hay ejecución al montar o recibir props.

El efecto sólo se ejecuta cuando una dependencia cambia, he ahí la importancia de hacerle caso al plugin eslint-plugin-react-hooks y no saltarse la definición de dependencias.

¿Cuál es la diferencia entre useEffect y los métodos del ciclo de vida?

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).

Relacionado: ¿Qué son los hooks?

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 de implementación, 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.