Ok para explicar mi problema en breve. Estaba siguiendo un tutorial de piedra, papel o tijera, pero cuando lo terminé, comencé a implementar cosas por mi cuenta. No soy nuevo en React, pero también tengo mucho que aprender todavía. Quiero entender completamente la gestión estatal. Una explicación rápida:

Este es un juego de piedra, papel o tijera, en el que el usuario puede hacer clic en los botones que representan la piedra, el papel y la tijera, y el mismo botón que recibe la entrada del usuario, también genera una selección aleatoria de computadora entre esos 3. (función handleClick)

Luego tengo un useEffect que compara la elección del usuario y la computadora, y luego aumento los puntos del usuario o la computadora en 1, a quien haya ganado esa ronda. Cuando los puntos de cualquiera de ellos llegan a 5, el juego termina y aparece un botón de reinicio.

Y ahora mi problema:

Cuando agrego la lógica condicional en el useEffect que ve si alguno de ellos alcanzó los 5 puntos, mi clic siempre está 1 detrás. Estoy configurando un estado para el fin del juego, que es falso en la carga de la aplicación y se establece en verdadero cuando se cumple la condición. Entonces, en este caso, llegará a 5, pero el botón de reinicio aparecerá en el próximo clic.

PERO, si agrego la lógica al JSX en su lugar, sin usar el estado, el botón de reinicio se muestra exactamente en la ronda 5, que es la forma correcta.

Ahora, investigué mucho, y sé que setState es asíncrono, y se evaluará en el próximo renderizado... pero no entiendo por qué lo hace si lo pongo en useEffect, que también tiene la dependencia matriz, que activará una nueva representación si cambia el estado. Incluso cuando pongo el 'gameOver' en la matriz de dependencia, todavía no funciona

Me falta información clave para poner todo el rompecabezas en su lugar.

Puedes encontrar el código aquí, no es muy largo.

https://www.codepile.net/pile/6PO6m8GN