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

Albin Landgren · Accepted Answer · 2022-05-23 12:36:46Z

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

answered May 23, 2022 at 12:36

Albin Landgren

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bejzyl Over a year ago

I don't get it. Can you explain to me how to use prevState for 2d arrays? Should I use this in useEffect? I tried to find something about it, but unfortunately there is nothing concrete.

Collectives™ on Stack Overflow

Update 2d array using React and hooks useState and useEffect

Edit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related