Dado el siguiente componente:

 import { useEffect, useState } from "react" const Test = () => { const [thing, setThing] = useState({ x: 0, y: 0 }); useEffect(() => { gameLoop(); }, []); const gameLoop = () => { const p = {...thing}; p.x++; setThing(p); setTimeout(gameLoop, 1000); } return ( <div> </div> ) } export default Test;

Cada segundo se imprime una nueva línea en la consola. Por supuesto, el resultado esperado debería ser:

 { x: 1, y: 0 } { x: 2, y: 0 } { x: 3, y: 0 }

...etc

Lo que en su lugar se imprime es:

 { x: 0, y: 0 } { x: 0, y: 0 } { x: 0, y: 0 }

He llegado a la conclusión de que esto se debe a un estado obsoleto. Algunas soluciones que he encontrado y probado son:

1. La matriz de dependencia

Agregar algo a la matriz de dependencia hace que se llame ridículamente rápido. Agregar thing.x a la matriz también hace lo mismo.

2. Cambiar la llamada setState

Una publicación que encontré mencionaba cambiar setState para que se viera así:

 setState(thing => { return { ...thing. x: thing.x+1, y: thing.y });

Lo cual no cambió nada.

He encontrado muchas publicaciones sobre relojes/cronómetros y cómo solucionar este problema con estados de valores primitivos pero no con objetos.

¿Cuál es mi mejor curso de acción para corregir el comportamiento manteniendo que solo se ejecuta una vez por segundo?

EDITAR: Los comentarios parecen indicar que intento algo como esto:

 import { useEffect, useState } from "react" const Test = () => { const [thing, setThing] = useState({ x: 0, y: 0 }); useEffect(() => { setInterval(gameLoop, 1000); }, []); const gameLoop = () => { console.log(thing) const p = {...thing}; p.x++; setThing(prevP => ({...prevP, x: prevP.x+1})); } return ( <div> </div> ) } export default Test;

Esto todavía se imprime incorrectamente:

 { x: 0, y: 0 } { x: 0, y: 0 } { x: 0, y: 0 }