useInterval

A declarative interval hook based on Dan Abramov's article on overreacted.io. The interval can be paused by setting the delay to null

You can also manually control it by passing the controls parameter.

Usage

Live Editor

function Demo() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <div>count: {count}</div>;
};

Result

Loading...

API

useInterval

Returns

Pausable

Arguments

Argument	Description	Type	DefaultValue
callback	callback	() => void (Required)	-
delay	Time, if null then stop the timer	number | null | undefined	-
options	optional params	UseIntervalOptions | undefined	-

UseIntervalOptions

Property	Description	Type	DefaultValue
immediate	Whether to execute immediately.	boolean	-
controls	Whether to control execution.	boolean	-

Pausable

Property	Description	Type	DefaultValue
isActive	A ref indicate whether a pausable instance is active	RefObject<boolean> (Required)	-
pause	Temporary pause the effect from executing	() => void (Required)	-
resume	Resume the effects	() => void (Required)	-