React game of life (error when clicking too fast)

Question

I am building a game of life with React. When I set "alive" cells by clicking on them 1-2 times per second it works fine, but when I try to click faster there is an error:

"TypeError: Cannot read property 'undefined' of undefined".

Error pointing to the fourth line of functional expression:

const onClick = (e) => {
    const indexies = e.target.id.split(",");
    const x = indexies[0];
    const y = indexies[1];
    setGrid([...grid], (grid[x][y] = !grid[x][y])); //error line
  };

Since state updates are async, it might happen that too fast changes doesn‘t reflect the current state. This may help to throttle your state updates: https://stackoverflow.com/questions/54666401/how-to-use-throttle-or-debounce-with-react-hook — Dennis, Sep 05 '20 at 21:41

score 0 · Answer 1 · answered Nov 04 '20 at 14:58

0

Updating the Grid State using a function is probably going to solve your issue:

setGrid((prevGridState) => "return your new state here")

answered Nov 04 '20 at 14:58

React game of life (error when clicking too fast)

1 Answers1