Después de algunas pruebas, descubrí que el siguiente problema ocurre en modo estricto. Me interesaría si alguien puede explicar por qué.
Tome este ejemplo simple donde dentro del renderizado solo estoy programando un tiempo de espera que actualiza el estado :
Ejemplo :
let firstRender = true; // Normally I would use ref but I was playing with example export default function App() { let [data, setData] = React.useState({ name: 'Nick' }); // Schedule a timeout on first render if (firstRender) { setTimeout(() => { console.log('Running'); setData((ps) => ({ ...ps, name: 'Paul', })); }, 1000); } console.log('Running render'); firstRender = false; return ( <div> <h1>{data.name}</h1> <p>Start editing to see some magic happen :)</p> </div> ); }Si ejecuta este ejemplo sin el modo estricto , verá "Paul" en la pantalla después de un segundo, como esperaba.
Si usa el modo estricto, siempre mostrará "Nick" en la pantalla. ¿Idea por qué?
ACTUALIZACIÓN : parece que usar useRef en lugar de la variable global firstRender soluciona este problema también en modo estricto. ¿Curioso por qué ese es el caso?
Esto se debe al hecho de que el modo estricto invoca intencionalmente el cuerpo del componente de función dos veces (cuando está en modo de desarrollo) para ayudar a detectar efectos secundarios no deseados.
En la segunda invocación, su variable firstRender es false , por lo que su setTimeout no se ejecuta.
Es importante tener en cuenta que esta segunda invocación no es solo una nueva representación como la que obtendría de una actualización de estado . Es una segunda invocación de todo el cuerpo del componente. El estado no se conserva. React invoca la función de su componente una vez, descarta el resultado y la invoca una segunda vez para obtener el resultado.
De los documentos :
Debido a que los métodos anteriores pueden llamarse más de una vez, es importante que no contengan efectos secundarios.
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:
- Cuerpos de componentes de función
P. Parece que usar useRef en lugar de la variable global firstRender soluciona este problema también en modo estricto. ¿Curioso por qué ese es el caso?
Según React Docs ,
Ref también es útil para mantener algún valor mutable. El valor que se almacena en ref no cambiará durante los renderizados posteriores, a menos que se cambie explícitamente.
Por lo tanto, para los valores que no desea cambiar (tal vez algún cálculo costoso) o por otras razones, use useRef .
El objeto "ref" es un contenedor genérico cuya propiedad actual es mutable y puede contener cualquier valor, similar a una propiedad de instancia en una clase.
Esto funciona porque useRef() crea un objeto JavaScript simple. La única diferencia entre useRef() y crear un objeto {current: ...} es que useRef le dará el mismo objeto ref en cada renderizado.
Tenga en cuenta que useRef no le notifica cuando cambia su contenido. Mutar la propiedad .current no provoca una nueva representación . Si desea ejecutar algún código cuando React adjunta o desconecta una referencia a un nodo DOM, es posible que desee utilizar una referencia de devolución de llamada en su lugar.