Update 2d array using React and hooks useState and useEffect

Question

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

Edit

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'
      
    }
  };

Answer 1

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
})