Lazily initialise state

[oliverjam]

Week10TT/src/components/snakegrid.js

Lines 10 to 26 in 91f8cac

	let initialRows = [];
	for (let i = 0; i < height; i++) {
	initialRows.push([]);
	for (let k = 0; k < width; k++) {
	initialRows[i].push("blank");
	}
	}
	const randomPosition = () => {
	const position = {
	x: Math.floor(Math.random() * width),
	y: Math.floor(Math.random() * height),
	};
	return position;
	};
	const [rows, setRows] = React.useState(initialRows);

This is more of an optimisation (your code is totally fine as is), but I think it's a cool thing to learn. useState can actually take a function that it will run to get the initial state value: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

This lets you "lazily" initialise state, which means only running the initialisation code once, rather than on every render. E.g. your code right now has to run a bunch of for loops and build up an array every time the snake moves, even though the initialArray is only used on the very first render, to initialise the state.

[oliverjam]

Oh also a cool way to create arrays of arbitrary length:

const arr = Array.from({ length: 10 });

It can also take a map function as the second argument, to pre-populate the array.

const rows = Array.from({ length: width }), () => "blank")

✨