useGameLoop - Zac Minner - Husband, Developer, Runner

You can use this hook inside your components or other hooks to trigger functions and such for each tick of the game loop.

import React, { useEffect, useState } from 'react';

const timeBetweenTicks = 1000;

const useGameLoop = () => {
  const [started, setStarted] = useState(false);
  const [tick, setTick] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      if (started) {
        setTick((t) => t + 1);
      }
    }, timeBetweenTicks);

    return () => {
      clearInterval(interval);
    };
  }, [started]);


  const startTick = () => {
    setStarted(true);
  };

  const stopTick = () => {
    setStarted(false);
  };

  const resetTick = () => {
    stopTick();
    setTick(0);
  };

  return { startTick, stopTick, resetTick, tick };
};

export default useGameLoop;