Editar
Está bien, mi mal, supongo que la respuesta es simple. Es un asunto de javascript. No estoy pasando una función a useState, pero en realidad la estoy volviendo a ejecutar cada vez. Así que sí, lo que estoy viendo es normal.
Dejaré mi pregunta aquí de todos modos.
A continuación se muestra un ejemplo de codesandbox.
Pregunta :
¿Podría alguien explicarme por qué React vuelve a ejecutar la función interna en un useState (o useRef) a pesar de que el valor devuelto se ignorará por completo (excepto la primera ejecución)? ¿Es este el comportamiento esperado de useState?
Explicación :
Me refiero a por qué veo este registro de consola aquí después de cada renderizado.
const [count, setCount] = React.useState((function(){ console.log('Executed !'); return 5; })())Solía pensar que esta función interna (o valores) es el equivalente de un Parámetro de clase o un Constructor de componentes, pero obviamente no es el caso.
Devolver un valor simple hace el trabajo, por supuesto: React.useState(5) .
Pero imagine usar una clase de terceros que funciona con valores estáticos en algún momento o simplemente no quiere volver a ejecutarla una y otra vez después de cada renderizado.
Una posible solución para esto es usar useEffect con una dependencia vacía. (El equivalente de componentDidMount )
Pero estoy preguntando sobre el propósito de esta ejecución.
let count = 0; // Number of component renders const Test = (props) => { const [innerCount, setCount] = React.useState((function(){})( console.log('Executed !'); // Executed after each re-render count = count + 1; return count; )); return innerCount; // Will be always 1 ! }¿Por qué se ejecutará la función anónima si el valor devuelto siempre es 1 = el primer valor devuelto? ¿Cuál es el propósito de esta ejecución?
Además de todas las demás respuestas, creo que este enlace soluciona su problema en el que solo desea llamar a la función en useState una vez.
Puedes cambiar esta línea en el sandbox:
const [dependency] = React.useState(() => new ThirdParty());y el contador de terceros dejaría de incrementarse.
Este no es un comportamiento específico de React, es solo lo que hace Javascript, y casi todos los lenguajes de programación principales.
Antes de llamar a una función, tiene que evaluar sus argumentos para saber qué pasar.
Sí, sucede que React.useState es una función que a menudo "ignora" su argumento. (No estoy familiarizado con la forma exacta en que se implementa; claramente, no es tan simple como eso, ya que necesita saber cuándo es la primera vez que se ejecuta en esa instancia de componente en particular , porque en ese caso se usa ese valor y devuelto.) Pero el motor Javascript del navegador no puede saberlo ni optimizarlo.
Para probar que esto no tiene nada que ver con React, puedo hacer esto:
function ignoresArgument(x) { return 1; } for (let i = 0; i < 20; i++) { ignoresArgument( (function(y) { console.log("I don't need to be executed, but Javascript doesn't know that so I will be executed 20 times"); return 2; })(1) ); }Creo que tu comprensión de useEffect es algo incorrecta. No solo se usa para componentDidMount . Lo que está describiendo es un síntoma de un efecto secundario que los casos indican cambios en los componentes. Aquí está la explicación de useEffect de la documentación oficial .
Si está familiarizado con los métodos de ciclo de vida de la clase React, puede pensar en useEffect Hook como componenteDidMount, componenteDidUpdate y componenteWillUnmount combinados.
useEffect sería ideal para esta situación si desea evitar renderizaciones que no son necesarias.
Es posible que React memo tampoco sea necesario para su solución.