Reaccionar useEffect en profundidad / uso de useEffect?

Estoy tratando de entender el useEffectgancho en profundidad.

Me gustaría saber cuándo usar qué método y por qué.

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

useEffect(callback)

Se ejecuta en cada componente render.

Normalmente se usa para la depuración, de forma análoga a la ejecución del cuerpo de la función en cada render:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

Se ejecuta una vez en un montaje de componentes.

Generalmente se usa para inicializar el estado de los componentes mediante la obtención de datos, etc.

Nota : La devolución de llamada ejecutada después de la fase de representación ("Gotcha" conocido).

useEffect(callback,[arg])

Se ejecuta en cambio de argvalor.

"Al cambiar" se refiere a una comparación superficial con el valor anterior de arg(compara el valor de argla representación anterior y la actual prevArg === arg ? Do nothing : callback()).

Usualmente se usa para ejecutar eventos en accesorios / cambio de estado.

Nota: Se pueden proporcionar dependencias múltiples: [arg1,arg2,arg3...]

• Una guía completa useEffectde Dan Abramov
• useEffectAPI .
• Usando el efecto hook - React docs.

Si está familiarizado con los métodos de ciclo de vida de la clase React, puede pensar en useEffect Hook como componentDidMount, componentDidUpdate y componentWillUnmount combinados.

1.useEffect sin segundos parámetros: Esto se usa cuando queremos que algo suceda, ya sea cuando el componente se acaba de montar o si se ha actualizado. Conceptualmente, queremos que suceda después de cada render.

2.useEffect con segundos parámetros como []: Esto se usa cuando queremos que algo suceda en el momento del montaje del componente, si solo se ejecuta una vez en el momento del montaje. Está más cerca del componente familiarDidMount y componentWillUnmount.

3.useEffect con algunos argumentos pasados ​​en el segundo parámetro: esto se usa cuando queremos que algo suceda en el momento en que pasó el pramter, por ejemplo Los argumentos han cambiado en su caso.

Para más información. marque aquí: https://reactjs.org/docs/hooks-effect.html

3.useEffect con algunos argumentos pasados ​​en el segundo parámetro useEffect (() => {}, [arg])

se ejecutará primero y luego se ejecutará nuevamente si cambia arg

También se olvida de preguntar qué pasa con el retorno dentro de useEffect ... Sus usos para la limpieza se ejecutará cuando se desmonte el componente