React: ¿Por qué el comportamiento predeterminado de useEffect es ejecutarse en cada renderizado?

Por el diseño de la API:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

useEffect se ejecutará solo cuando cambie la lista de dependencias, y la matriz vacía [] significa que no hay dependencia (es decir, solo se ejecutará una vez). Me parece lógico que la lista de dependencias indefinidas signifique ejecutar la función envuelta por useEffect cada render.

No puedo pensar en muchos (cualquier) patrón en el que desee ejecutar useEffect en cada render. ¿Cuál fue el razonamiento detrás de no dejar de ejecutar una vez?

Suponga que es muy nuevo en React y quiere hacer algo cada vez que cambia una variable useState (por ejemplo, PUBLICAR el nuevo valor en un servidor).

• Con el comportamiento actual, PUBLICARÍA el mismo valor varias veces, pero nunca dejaría de publicar un valor modificado.
• Con el comportamiento que está sugiriendo, solo se publicará el valor inicial / primer cambio, y los cambios posteriores no activarían la devolución useEffect llamada

Creo que la lista de dependencias está destinada a ser más una optimización del rendimiento / ayuda a la simplificación del código.

La API actual le permite decidir entre los siguientes comportamientos:

• Ejecute el efecto cada vez. Esto imita el comportamiento de la clase anterior componentDidMount + componentDidUpdate .
• Ejecute el efecto solo una vez. Esto imita el antiguo comportamiento componentDidMount .
• Ejecute el efecto solo cuando cambien las dependencias. Esto es algo nuevo, aunque podría (y con frecuencia lo hizo) implementar lo mismo mediante el componente this.props y prevProps en la API del componente de clase.

El comportamiento "predeterminado" que describe (cuando no especifica explícitamente las dependencias) es a menudo el más seguro, ya que evita que se utilicen valores obsoletos en los cierres .

En el futuro, es de esperar que proporcionemos algún tipo de compilador para ayudar a automatizar gran parte de esto. Mientras tanto, proporcionamos un complemento oficial de ESLint para ayudar a que sea un poco más fácil. 😄