Tengo este objeto de Game muy grande que determina por completo el estado del juego, incluidos los datos que se procesan y los datos que no se procesan. Sus valores anidados se cambian con mucha frecuencia.
¿Debo almacenar este objeto tan grande en un estado...
const [game, setGame] = useState(new Game()) // Very large Game object y usar setGame con cada pequeña actualización del juego? Por ejemplo,
function playerDamage(dmg) { const nextState = game.copy(); nextState.player.health -= dmg; setGame(nextState); } Me parece que sería extremadamente ineficiente hacer una copia de Game y usar setGame con cada pequeño cambio en Game. ¿Tengo razón en esta suposición, o React y TS/JS manejan esto bien "bajo el capó"?
Supongo que para reformular esta pregunta: ¿cuál es la mejor manera de actualizar con frecuencia los valores profundamente anidados en un objeto de estado React?
Tal vez deberías probar Redux para administrar el estado y usar una tienda para administrar el estado del juego.
Sí, su enfoque actual bien podría ser bastante ineficiente si copia todo el objeto :
const nextState = game.copy(); Si el game es tan grande, hacer una copia tan profunda con frecuencia podría ser un problema. Pero, para esta situación particular, hay una solución simple: no copiar todo, solo copiar los objetos que necesitan ser cambiados. Solo hay dos objetos que deben cambiarse (más el nuevo objeto de estado externo final), así que solo cámbielos, en lugar de copiar todo recursivamente.
function playerDamage(dmg) { setGame({ ...game, player: { ...game.player, health: game.player.health - dmg } }); } Esta versión de la función playerDamage sería bastante barata.