Skip to content

Instantly share code, notes, and snippets.

@akhrszk
Last active Jan 18, 2023
Embed
What would you like to do?
React Hooks for using setInterval
import { useEffect, useRef, useState } from 'react';
type Control = {
start: () => void;
stop: () => void;
};
type State = 'RUNNING' | 'STOPPED';
type Fn = () => void;
export const useInterval = (fn: Fn, interval: number, autostart = true): [State, Control] => {
const onUpdateRef = useRef<Fn>();
const [state, setState] = useState<State>('STOPPED');
const start = () => {
setState('RUNNING');
};
const stop = () => {
setState('STOPPED');
};
useEffect(() => {
onUpdateRef.current = fn;
}, [fn]);
useEffect(() => {
if (autostart) {
setState('RUNNING');
}
}, [autostart]);
useEffect(() => {
let timerId: NodeJS.Timeout | undefined;
if (state === 'RUNNING') {
timerId = setInterval(() => {
onUpdateRef.current?.();
}, interval);
} else {
timerId && clearInterval(timerId);
}
return () => {
timerId && clearInterval(timerId);
};
}, [interval, state]);
return [state, { start, stop }];
};
export default useInterval;
@XxGodmoonxX
Copy link

@akhrszk
https://zenn.dev/akhr_s/articles/065e18ab3c4883
こちら見て参考にさせていただきました、ありがとうございます…!

すごく細かいのですが1点、

  const [state, setState] = useState<State>('RUNNING');

  const [state, setState] = useState<State>('STOPPED');

でないと、autostartの値に関わらずsetIntervalがはじまってしまうのではないかと思いました!
(見当違いであった場合ご放念ください!)

@akhrszk
Copy link
Author

akhrszk commented Jan 17, 2023

@XxGodmoonxX
おっしゃる通りです! 🙇‍♂️
修正しました、、ありがとうございます! 🙏

@XxGodmoonxX
Copy link

@akhrszk
👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment