Leí este artículo React Hook to Run Code After Render y me encontré con esta línea React can and will sometimes call your components multiple times before actually rendering them to the screen, so you can't rely on “one call == one render”. ¿Puede alguien por favor explicar lo que quiso decir?
Escribí este código
function x() { console.log("x"); } function y() { console.log("y"); return "y"; } function Silicon() { console.log("silicon"); return <div></div>; } function useDarko() { const [count1, setCount1] = useState(0); console.log("useDarko"); return [count1, setCount1]; } export default function Test0022() { const [darko, setDarko] = useDarko(); const [count1, setCount1] = useState(0); x(); useEffect(() => { if (count1 !== 200) setTimeout(() => { setCount1((e) => ++e); }, 100); }, [count1]); return ( <> <Silicon /> {y()} </> ); } Siempre veo 804 console.log, funciona como se esperaba one call == one render .
Durante aproximadamente 4 años, reaccionar ha estado trabajando para implementar una función llamada "modo concurrente" (sí, se había anunciado mucho antes de que se publicara ese artículo). Estará en la versión 18 de reaccionar, que actualmente se encuentra en un estado de candidato de lanzamiento.
El modo concurrente permite reaccionar para abortar un renderizado de larga ejecución a mitad de camino para manejar una actualización más importante. Este nuevo enfoque tiene implicaciones para los ganchos del ciclo de vida y para el comportamiento de los efectos secundarios y, como resultado, el equipo de reacción ha estado entrenando a la comunidad para comenzar a escribir su código de una manera que funcione con el modo concurrente. Por ejemplo, descartaron varios enlaces de ciclo de vida de componentes de clase que no serían seguros con el nuevo enfoque.
Y como menciona el artículo, uno de los modelos mentales a los que debemos acostumbrarnos es que un componente puede llamarse varias veces antes de que realmente aparezca en la pantalla. Su componente puede recibir una llamada, ejecutarse completamente y luego reaccionar se da cuenta de que necesita descartar ese trabajo y comenzar de nuevo. Estos casos son raros, pero para ayudarlo a detectar problemas, puede usar el modo estricto . Entre otras cosas, deliberadamente renderizará dos veces sus componentes en las compilaciones de desarrollo, para que sea más fácil detectar errores que solo ocurren cuando ocurren estos casos de renderizado doble.
Tenga en cuenta que en React 17, este procesamiento doble en modo estricto sobrescribe la función console.log para que no tenga efecto y, como resultado, es difícil ver que está sucediendo.