useInterval

useInterval is a React hook that executes a function at a specified interval. It is useful for timers, polling data, and other recurring tasks.

Interface

type IntervalOptions =
  | number
  | {
      delay: number;
      enabled?: boolean;
      immediate?: boolean;
    };

function useInterval(callback: () => void, options: IntervalOptions): void;

Parameters

• callback (() => void): The function to be executed periodically.
• options (IntervalOptions): Configures the interval behavior.
  • delay (number): The interval duration in milliseconds.
  • immediate (boolean): If true, executes immediately before starting the interval. Defaults to false.
  • enabled (boolean): If false, the interval will not run. Defaults to true.

Notes

• The timer is automatically cleaned up when the component unmounts.
• If the delay value changes, the timer will restart.
• You can control the execution by setting enabled to false.

Returns

This hook doesn't return any value.

Examples

Basic Usage

import { useInterval } from 'reactive-kit';

function Timer() {
  const [time, setTime] = useState(0);

  useInterval(() => {
    setTime(prev => prev + 1);
  }, 1000);

  return (
    <div>
      <p>{time} seconds</p>
    </div>
  );
}

Stopwatch

You can control the execution by setting enabled to false.

import { useInterval } from 'reactive-kit';

function StopWatch() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useInterval(
    () => {
      setTime(prev => prev + 1);
    },
    {
      delay: 1000,
      enabled: isRunning,
    }
  );

  return (
    <div>
      <p>{time} seconds</p>
      <button onClick={() => setIsRunning(prev => !prev)}>{isRunning ? 'Stop' : 'Start'}</button>
    </div>
  );
}

Polling Data Updates

Set trailing to false to execute the callback immediately and then periodically.

import { useInterval } from 'reactive-kit';

function PollingExample() {
  const [data, setData] = useState<string>(null);

  useInterval(
    async () => {
      const data = await getData();
      setData(data);
    },
    {
      delay: 3000,
      trailing: false, // Execute immediately and then every 3 seconds
    }
  );

  return <div>{data}</div>;
}