- Current method of drawing snake head draws rows from top to bottom, and indicates rows with squares occupied by the snake body segments. This can cause problems when trying to distinguish and style the snake head segment, as the order in which rows are drawn is not guaranteed to be the order in which the snake body segments are laid out (i.e. no guarantee of snake position being top to bottom e.g. if the snake is coiled, a middle body segment may be near the top of the board and drawn first)
=> Fixed by recording path history, and filling in squares occupied by snake according to snake length, starting from most recent path history entry.
=> Will be fixed by checking direction of "neck" segment.
=> Fixed by setting property dependencies in hook.
=> Fixed by returning () => clearInterval(timer) inside the useEffect hook. => If function inside useEffect returns a function, React will execute it during clean up. => React performs clean up when component unmounts. Without returning clearInterval, setInterval from previous renders was not being cleaned up.