CODEWITHSUNDEEP
javascriptreactjs
danielhep
danielhep

Reputation: 356

React useState with "deep" array not rerendering components

I have a 2D array stored using useState() in React. When I update one of the values in the array (be creating an entirely new 2D array, it doesn't actually re-render my component with the new values. The component only gets updated if I do something else after updating the 2D array that causes the component

My array is defined like this:

const [grid, setGrid] = useState([
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ]

And I update it like this

    setGrid(prevGrid => {
      const newRow = prevGrid[posy]
      newRow[posx] = currentPlayer
      const newGrid = prevGrid
      newGrid[posy] = newRow
      return newGrid
    }

And finally, I'm using it in components like this:

<Square status={grid} y={2} x={0} clickEvent={() => handleBoxClick(2, 0)} /

I suspected that the problem was relating to the "depth" of the state object, but I don't think React has the same problems with not detecting deep updates that Vue has. (I am formerly a Vue dev) So, I figure I'm doing something wrong here with updating the state.

Thanks

Upvotes: 2

Views: 305

Answers (1)

Aitwar
Aitwar

Reputation: 903

React detects changes using reference comparison, so you must modify your array in immutable way.

setGrid(prevGrid => {
  const newRow = [...prevGrid[posy]]
  newRow[posx] = currentPlayer
  const newGrid = [...prevGrid]
  newGrid[posy] = newRow
  return newGrid
}

Upvotes: 3

Related Questions