Uso del gancho useEffect

Español Ayuda de programación
1

useEffect

Este es un concepto introducido por react en 2018, y lo llamaron ganchos (Hook). De lo cual ya hemos visto otro concepto relacionado, los estados también son ganchos (Hook). En el caso de useEffect lo llamaron efectos secundarios y cuesta bastante entenderlo a alguien que no sepa nada de react como es el caso de quien describe este artículo, por esa razón me detuve varias horas a investigar algún ejemplo o problema sencillo que ejemplificara las características de useEffect. Algunos de los ejemplos de la documentación oficial no ejemplifican adecuadamente el uso de estos efectos como para que un lector poco experimentado lo pueda comprender. Hago énfasis en las palabras problema sencillo, debido a que el primer concepto que debe tener claro el lector es el problema que se intenta resolver con react. Nos apoyaremos en un ejemplo que brinda la documentación oficial, el cual lo modificaré para que se pueda distinguir el efecto.

El siguiente fragmento está basado en el ejemplo del contador, pero le hemos añadido una funcionalidad nueva: actualizamos el título del documento con un mensaje personalizado que incluye solo el número de clicks impares.

import React, { useState, useEffect } from 'react';
function Example() {
 const [count, setCount] = useState(0);
 const [isImpar,setIsImpar]=useState(false);
    function handleOnClick(){        
         setCount(count + 1);   
         if (!(count%2)) 
            setIsImpar(!isImpar);
  }
  useEffect(() => {
      document.title = `You clicked ${count} times`; 
         },[isImpar]);


  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={ onClick={handleOnClick }>
        Click me
      </button>
    </div>
  );
}

EL segundo parámetro [isImpar] pasado al gancho useEffect define el funcionamiento de este gancho, solo se ejecutara la callback pasada como primer parámetro cuando el estado isImpar cambie de valor y eso solo sucederá si count es impar.
Ahora si cambiáramos la función a esta otra forma veremos que sucede.

useEffect(() => {// Actualiza el título del documento usando la API del navegador 
        document.title = `You clicked ${count} times`; 
        },[]);

EL segundo parámetro [] react asume que no interesan los cambios de ningún estado ni de ningún parámetro en las props, por lo que useEffect solo se ejecutara al inicio.

Ahora si cambiáramos la función a esta otra forma veremos que sucede.

  useEffect(() => {// Actualiza el título del documento usando la API del navegador 
         document.title = `You clicked ${count} times`; 
         });

No pasamos el 2do parámetro de la función useEffect, pues simplemente se ejecutara siempre, da la impresión incluso que usar useEffect y no usarla produce el mismo resultado.

 document.title = `You clicked ${count} times`;

Se que es un poco extenso, pero es la manera de dar todo lo que he podido aprender de este gancho, y se que tengo errores e incluso no domino bien varios de los coceptos, solo expongo de manera práctica, y por esa razón estoy seguro que no estoy viendo algunos elementos que me faltan en esas explicaciones. Si alguien fuera tan amable, de tomarse el tiempo y ayudarme. Gracias, por su trabajo.

2

Cuando los parámetros del estado cambian (en la lista de dependientes como [isImpar]), el efecto se ejecuta. Si quisiera ejecutar un efecto cuando un parámetro tener un valor (como true o false) solamente, necesitará implementar este lógico en la función. También, este código

causa este error de lint

  Line 43:5:  React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

porque este component usa count y isImpar.

Por ejemplo de la empieza: count es 0 y isImpar es false. Hago un click. count y isImpar cambian. Los estados cambian, entonces, el efecto se ejecuta. La función necesita usar count y isImpar para decidir que va a hacer. Si isImpar sea false, document.title no cambia. Pero, si isImpar sea true, document.title cambia con el número nuevo (impar) de clicks.

Modifiqué su código y creo que funcionar correctamente.

import React, { useState, useEffect } from 'react';

function Impar() {
  const [count, setCount] = useState(0);
  const [isImpar, setIsImpar] = useState(false);

  function handleOnClick() {
    setCount(count + 1);   
    if (! (count % 2)) {
      setIsImpar(true);
    } else {
      setIsImpar(false);
    }
  }

  useEffect(() => {
    if (isImpar) {
      document.title = `You clicked ${count} times`;
    }
  }, [count, isImpar]);


  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleOnClick}>
        Click me
      </button>
    </div>
  );
}

export default Impar;

Pero, no hablo español frecuentemente y es posible que no entiendo nada.

3

Entiendo, su idea, pero sucede que si al menos cambia uno de los dos estados del componente isImpar o count entonces segun la lista de dependencias [count, isImpar] se ejecutara useEffect , por lo que según la implementación que propone el titulo cambiara cada vez que count se incremente. Gracias por su cooperación.