Problem in game lifecycle with React-Hooks - reactjs

Question

Task:
There is a field (grid) along which the snake's head moves, when you click on the arrows, the head changes direction.
Rendering should take place according to the initial speed (and it can also change depending on conditions, it is not included in the context of this request), the speed is calculated in seconds / milliseconds.
All code works fine except for the problem (GameSleep method) with managing this same render delay until the next step (render).
Who can help with setting up a lifecycle that suits the original task?
main screen
p.s. Sorry for the long listing, could not hide in the spoiler
CODE
Index.js:
ReactDOM.render(<Provider store={store}><Snake/></Provider>, document.getElementById('root'));
Snake.js:
const Snake = (props) => {
const [process, setProcess] = useReducer(
ReducerProcess, {start: false, victory: false, gameover: false, reset: true }
);
const [direction, setDirection] = useState(undefined);
const SnakeEventListener = useCallback((event) => {
if( checkKey(event.code) ) {
const direction = getDirection(event.code);
setDirection(direction);
}
}, []);
const onProcess = useCallback((inType) => {
switch(inType) {
case STATE.reset:
setDirection(undefined); break;
case STATE.start:
document.addEventListener('keydown', SnakeEventListener, false); break;
case STATE.victory:
document.removeEventListener('keydown', SnakeEventListener, false); break;
case STATE.gameover:
document.removeEventListener('keydown', SnakeEventListener, false); break;
default: break;
}
setProcess({type: inType});
}, [SnakeEventListener]);
return (
<div>
<Grid process={process} toProcess={onProcess} direction={direction} toDirection={setDirection}/>
<button onClick={()=>onProcess('reset')}>Reset</button>
<button onClick={()=>onProcess('start')}>Start</button>
</div>
);
}
Grid.js:
const Grid = (props) => {
const {process, toProcess, direction, toDirection} = props;
const [snake, setSnake] = useState(undefined);
const [grid, setGrid] = useState(undefined);
// Effect => Initial
useEffect(() => {
const Initial = () => {
setSnake( initSnake() );
toDirection( initDirection() );
setGrid( InitGrid() );
}
if(process.reset && !direction) { Initial(); }
}, [process, direction, toDirection]);
// Effect => Game Loop
useEffect(() => {
const GameLoop = () => {
const build = BuildGrid(snake, direction);
if(build.victory || build.gameover) {
if(build.victory) { toProcess('victory'); }
if(build.gameover) { toProcess('gameover'); }
}else{
setSnake(build.snake);
setGrid(build.grid);
}
}
if(process.start && direction) { GameLoop(); }
}, [process, toProcess, direction, snake]);
return (<div>{ Cells(grid) }</div>);
}
Building.js:
const BuildGrid = (input) => {
const content = Execute(input);
return content;
}
const Execute = async (input) => {
await GameSleep(input.speed);
let newSnake = input.snake;
… … …
return { snake: newSnake, victory: victory, gameover: gameover };
}
const GameSleep = async (delay) => {
return new Promise(resolve => setTimeout(resolve, delay));
}

Answer 1

You can try a clearTimeout(timeoutName). You can create a function that clears the timeout.
let gameSleepTimeout;
const GameSleep = (delay) => {
gameSleepTimeout = setTimeout(() => console.log('setTimeout callback'), delay);
};
const clearGameSleep = () => clearTimeout(gameSleepTimeout);