React Hooks Project Tutorial - Game of Life

Learn how to build Conway's Game of Life using React hooks in this project tutorial.

​
----
#benawad

[carlosdesantiago]

I gotta say, this is the best comment section ever. So many helpful ideas and thoughtful comments.

[barclaysd]

Awesome tutorial as always Ben, really enjoyed it! If you wanted to adapt it to a 'wrap-around' world where the edges consider the other side neighbours (otherwise the edges never change) then you can do it really neatly using modulus like this:
const countNeighbors = (grid: any, x: number, y: number) => {
return operations.reduce((acc, [i, j]) => {
const row = (x + i + numRows) % numRows;
const col = (y + j + numCols) % numCols;
acc += grid[row][col];
return acc;
}, 0);
};

[benjidaniel]

Thanks for a fun video. Just had a minor nit: I much prefer using `x`, `y` over `i`, `k` for navigating grids as they offer more meaning while still being terse.

[DineshU]

Thank Ben. Please make more videos like this. Thanks again. :)

[rafaelgpontes]

I love creative programming and this video just made me realize that you can definitely make art with some ingenuity even without the canvas tag! Hahaha

[julianklumpers]

Here is a nice 1-liner for making a grid.
ROWS}).map(() => Array.from({length: COLUMNS}).fill(0)))

[arinramer]

How are you this good? What's your secret? I'm supposed to be doing this for school and it's making my brain melt.

[mustafwm]

Array(numCols).fill(0) would also work

[RaviSojitraJarvis]

Hi Ben, here is simple one liner to toggle value,
grid[i][k] = 1-grid[i][k]

[awekeningbro]

instead of using immer, we can just use this helper function:

const produce = (grid, callback) => {
const newgrid =
callback(newgrid);
return newgrid;
};

and use it:
const newgrid = produce(grid, (newgrid) => {
newgrid[i][j] = 1 - newgrid[i][j];
});
setGrid(newgrid);

[ximonx]

0:45 command needs to be npx create-react-app game-of-life --template typescript 👍

[sojuthomas]

Excellent Ben. Really enjoyed it. Thanks

[vyctor]

Really cool. This helped me better understand hooks

[stevenhansel]

Modern typescript way of initializing 2D arrays:
Array.from(Array(NUM_ROWS), (_) => Array(NUM_COLS).fill(0))

[sanjaygalami]

A cellular automaton based on hexagonal cells instead of squares would be better one. Thanks man

[aashayamballi]

Wow that's so cool.. Thank you Ben 😊

[arcticspacefox]

Cool video, will watch it in whole when I got time. 🔥🤙

[vorname]

since the demo is for react hooks, the timeout is a typical situation for the effect hook with cleanup logic.

[kike_estilo_libre]

Thanks! Nice video! I wonder how could I make this run a little bit faster? I thought this line "setTimeout(runSimulation, 10);" should have make it go 10 times faster but it didn't.

[ajaiakaoaosnaiansjaoanskak]

Unfamiliar with useCallback, but instead of using useRef, could you have passed in the running state variable into the list of dependencies in the useCallback hook?