I'm trying to create easy bouncing ball game in 2d array with React hooks. I have a problem to solve:
When the ball hits the green field, it should change the vector to random and change its value in the array from "Y" to "0". It changes direction, but the green space does not disappear from the board. It's still back after re-render.
Here's a full code: https://stackblitz.com/edit/react-cvlqsp?file=src/App.js
I found that the green box disappears, but each time the ball moves, it re-renders and it looks like it permanently. I can't help myself not to render the whole thing every time but only the ball movement. Should I use this in useEffect? and how?
Here's functions for random vector and value of array changes not working:
let random = () => {
if (Math.random() < 0.5) {
setVectorX((vectorX *= -1));
} else {
setVectorY((vectorY *= -1));
}
};
let checkforYCollsion = () => {
if (board[positionY][positionX] === 'Y') {
random();
board[positionY][positionX] = '0'
}
};
You need to update the state with the changed 2d array by calling setBoardToDisplay, not by assigning the value of board, since this will not trigger a re-render. You can do this by utilising a callback function in setBoardToDisplay.
setBoardToDisplay((prev) => {
// make desired changes to prev and return it
})