javascript - React フックを使用して自己インクリメント カウンターを実装する

Question

コードはこちら: https://codesandbox.io/s/nw4jym4n0

export default ({ name }: Props) => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter(counter + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  });

  return <h1>{counter}</h1>;
};

問題は、各setCounterトリガーが再レンダリングされるため、間隔がリセットされて再作成されることです。状態 (カウンター) が増加し続けるため、これは問題ないように見えるかもしれませんが、他のフックと組み合わせるとフリーズする可能性があります。

これを行う正しい方法は何ですか？クラスコンポーネントでは、間隔を保持するインスタンス変数を使用すると簡単です。