Básicamente es una combinación de React.StrictMode invoca dos veces el cuerpo de la función como una forma de ayudarlo a detectar efectos secundarios inesperados.

El modo estricto no puede detectar automáticamente los efectos secundarios, pero puede ayudarlo a detectarlos haciéndolos un poco más deterministas. Esto se hace mediante una doble invocación intencional de las siguientes funciones:

• Métodos constructor de componentes de clase, render y shouldComponentUpdate
• Componente de clase método estático getDerivedStateFromProps
• Cuerpos de componentes de función <-- esto
• Funciones de actualización de estado (el primer argumento de setState )
• Funciones pasadas a useState , useMemo o useReducer

volver a montar el componente para garantizar el estado reutilizable

Para ayudar a sacar a la luz estos problemas, React 18 presenta una nueva verificación solo para desarrollo en el modo estricto. Esta nueva verificación desmontará y volverá a montar automáticamente cada componente, siempre que un componente se monte por primera vez, restaurando el estado anterior en el segundo montaje.

y el gancho useEffect se llama al final del ciclo de renderizado.

 function Homepage() { const [state, setState] = useState(); useEffect(() => { console.log("useEffect"); // logs second as expected side-effect console.log("useEffect not executed"); setState("hello"); }, []); if (!state) { console.log("state not defined"); // logs first as unintentional side-effect return <div>State undefined</div>; } return <div>ciao</div>; }

...

 import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import Homepage from "./Homepage"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( <StrictMode> <Homepage /> </StrictMode> );

Explicando los registros

salida de la consola:

 state not defined // <-- initial render state not defined // <-- double invocation of function body useEffect // <-- effect at end of initial render useEffect not executed // <-- effect at end of initial render

...desmontar/montar

 useEffect // <-- effect at end of render useEffect not executed // <-- effect at end of render

useEffect se ejecuta cuando la página se procesa y las otras funciones se ejecutan antes useEffect , por lo que su código ejecuta if (!state) primero, luego useEffect se ejecuta y el estado se establece en "hola"; aquí hay un enlace para comprender completamente el gancho useEffect: useEffect ; Buena suerte;

su instrucción if se ejecuta antes de useEffect, incluso si está después, debe colocar ambos divs dentro de return y eliminar if

 return ( {!state ? <div>State undefined</div> : <div>ciao</div>} )