delay만 바꾸면 주기가 즉시 갱신되고 null이면 멈추는 setInterval 훅
콜백을 ref에 보관해 매 틱 최신 상태를 참조하는 선언적 setInterval.
이럴 때 필요해요
setInterval에 콜백을 직접 넣으면 첫 렌더의 state에 갇혀(stale closure) 카운터가 안 올라가는 버그를 겪죠. 폴링타이머자동 슬라이드처럼 "주기를 동적으로 바꾸거나 멈춰야" 할 때 답입니다.
어떻게 동작하나
콜백을 ref에 동기화
effect는 delay에만 의존해 인터벌 설치/해제
delay=null이면 정지.
놓치기 쉬운 것
콜백을 deps에 넣으면 매 렌더 인터벌이 재설정됨 / cleanup으로 clearInterval 필수 / 정지는 delay를 null로.
import type { Metadata } from "next";
import { IntervalDemo } from "./-components/IntervalDemo";
export const metadata: Metadata = {
title: "useInterval (데모)",
description:
"선언적 setInterval 훅. delay로 주기를 제어하고 null이면 정지. 콜백을 ref에 보관해 stale closure를 피합니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60">
<IntervalDemo />
</main>
);
}