ReactJS | useEffect Hook

La motivación detrás de la introducción de useEffect Hook es eliminar los efectos secundarios del uso de componentes basados ​​en clases. Por ejemplo, tareas como actualizar el DOM, obtener datos de puntos finales de API, configurar suscripciones o temporizadores, etc. pueden tener efectos secundarios injustificados. Dado que el método de renderizado es demasiado rápido para producir un efecto secundario, es necesario utilizar métodos de ciclo de vida para observar los efectos secundarios. Por ejemplo, considere actualizar el título del documento para un componente de contador simple al valor actual. En el renderizado inicial, establecemos el valor de clic actual en 0 clics. Por lo tanto, esta sección está codificada en el método componentDidMount() que se ejecuta solo una vez en el ciclo de vida del componente. Luego creamos un botón para incrementar el valor del estado de conteo en uno con cada clic. A medida que cambia el estado del valor de conteo, también necesitamos actualizar el título del documento nuevamente y para eso, necesitamos escribir el mismo código en componentDidUpdate(). El método componentDidupdate() es perfecto para actualizar el valor del contador en cualquier momento en que cambie el estado, pero la repetición del código es uno de los efectos secundarios.

componentDidMount(){
    document.title = `you clicked ${this.state.count} times`;
}
 
componentDidUpdate(){
    document.title = `you clicked ${this.state.count} times`;
}

Consideremos otro efecto secundario configurando un temporizador. En el método componentDidMount(), configuramos un temporizador para registrar una string «hola» cada 5 segundos. Podemos borrar este temporizador cuando el componente se elimina del DOM. Y lo hacemos en el método de ciclo de vida de componentWillUnmount(). Entonces, el código para el temporizador se ve a continuación:

componentDidMount(){
    this.interval = setInterval(this.tick, 1000)
}
 
componentWillUnmount(){
    clearInterval(this.interval)
}

Tanto el contador como el temporizador cuando se fusionan para formar un solo componente se ven a continuación:

componentDidMount(){
    document.title = `you clicked ${this.state.count} times`;
    this.interval = setInterval(this.tick, 1000)
 
}
 
componentDidUpdate(){
    document.title = `you clicked ${this.state.count} times`;
    clearInterval(this.interval)
}

Al observar el código anterior, tendemos a notar que para actualizar el título del documento escribimos el mismo código dos veces, una vez en componentDidmount() y otra vez en componentDidUpdate(). La segunda cosa a observar es cómo se divide el código en el componente. El código relacionado con el temporizador, setInterval y clearInterval que están relacionados se colocan en diferentes bloques de código (es decir, diferentes métodos de ciclo de vida). El código para actualizar el DOM y el código para configurar el temporizador, que no tiene ninguna relación, se colocan en el mismo método de ciclo de vida (es decir, en componentDidMount()). Será mucho mejor si hay una opción para no repetir el código al mismo tiempo, agrupar los códigos relacionados en el mismo bloque. Aquí es donde el useEffect Hook entra en escena. 
Effect Hook le permite realizar efectos secundarios en componentes funcionales. Es un reemplazo cercano para el método componentDidMount(), componentDidUpdate() y componentWillUnmount().

useEffect after render: sabemos que useEffect() se usa para causar efectos secundarios en componentes funcionales y también es capaz de manejar los métodos de ciclo de vida de componenteDidMount(), componenteDidUpdate() y componenteWillUnmount() de componentes basados ​​en clases en componentes funcionales . Veamos un ejemplo sobre cómo usar el gancho useEffect como una característica que puede imitar los métodos de ciclo de vida mencionados anteriormente pero en componentes funcionales. 

Para una mejor comprensión, veamos cómo se ve el código en un componente de clase a continuación y lo llamaremos «ClassComponentOne»

Nombre de archivo: src/components/ClassCounterOne.js  

import React, { Component } from 'react'
 
class ClassCounterOne extends Component {
    constructor(props){
        super(props)
        this.state = {
            count: 0
        }
    }
 
componentDidMount(){
    document.title = `Clicked ${this.state.count} times`
}
 
componentDidUpdate(prevProps, prevState){
    document.title = `Clicked ${this.state.count} times`
}
 
render() {
    return (
        <div>
            <button onClick = {() => this.setState(
                  { count: this.state.count + 1})}>
                Click {this.state.count} times
            </button>
        </div>
    )
}
 
export default ClassCounterOne

Ahora, incluimos el componente en App.js. El código se verá como a continuación para App.js

Nombre de archivo: src/App.js 

import React from 'react'
import './App.css'
import ClassCounterOne from './components/classCounterOne'
 
function App(){
    return(
        <div className='App'>
        <ClassCounterOne />
        </div>
    )
}
 
export default App

Ahora si miramos el navegador podemos observar que inicialmente el título del documento es “Clicked 0 times”. 

Y si hacemos clic en el botón, el valor de conteo aumenta en 1 en cada clic y también actualiza el título. 

Ahora intentemos reemplazar la funcionalidad con un componente funcional. Para el mismo propósito, cree un nuevo archivo y asígnele un nombre (por ejemplo, HookCounterOne.js) 

El componente funcional se verá como el siguiente código:

Nombre de archivo: src/components/HookCounterOne.js 

import React, { useState, useEffect } from 'react'
 
function HookCounterOne() {
    const [count, setCount] = useState(0)
 
    useEffect(() => {
        document.title = `You clicked ${count} times`
 
    return (
        <div>
            <button onClick = {() => setCount(count + 1)}>
                  Click {count} times </button>
        </div>
    )
}
export default HookCounterOne

Ahora necesitamos importar el componente anterior en nuestro archivo App.js. Después de la inclusión del componente HookCounterOne, el código se ve a continuación:

Nombre de archivo: src/App.js 

import React from 'react'
import './App.css'
import ClassCounterOne from './components/classCounterOne'
 
function App(){
    return(
        <div className='App'>
        <HooKCounterOne />
        </div>
    )
}
 
export default App

Ahora, si miramos en el navegador, podemos ver el estado inicial como se muestra a continuación. Inicialmente, el título del documento dice «Hiciste clic 0 veces». 

Y cuando hace clic en el botón, el valor de conteo aumenta y el título del documento se actualiza. Como podemos observar el comportamiento es el esperado.  

Cuando especificamos useEffect básicamente estamos solicitando reaccionar para ejecutar la función que pasamos en la función useEffect como argumento, cada vez que el componente se renderiza. La segunda cosa a tener en cuenta es que useeffect se usa dentro del componente, ya que al hacer esto podemos acceder fácilmente al estado y accesorios de los componentes sin tener que escribir ningún código adicional.