Reactで時計を作成していると、秒針が1秒ごとに一周回ってしまう問題が発生することがあります。この問題は、状態の管理や`useEffect`フックの使い方に起因することが多いです。この記事では、この問題の原因とその解決方法について詳しく解説します。
問題の原因
コードでは、`angle`の状態を`seconds * 6 – 90`で設定しており、これ自体は秒針の回転角度を設定するために正しい方法です。しかし、`useEffect`の依存配列に`angle`を追加しているため、`angle`が更新されるたびに`useEffect`が再実行され、無限ループのように更新されることがあります。これにより、秒針が1秒で一周回る問題が発生してしまいます。
解決方法
この問題を解決するためには、`useEffect`の依存配列に`angle`を入れる必要はありません。`useEffect`は、秒針の角度を更新するだけなので、`angle`の変更をトリガーにする必要はないのです。
依存配列から`angle`を取り除き、`useEffect`内で`updateAngle`関数を呼び出すように変更することで、無限ループを防ぎます。また、`setAngle`を`angle`の状態更新で即時反映できるように修正します。
修正後のコード例
import { useEffect, useState } from 'react';
export default function SecondHand({ isDarkMode }) {
const [angle, setAngle] = useState(0);
useEffect(() => {
const updateAngle = () => {
const seconds = new Date().getSeconds();
setAngle(seconds * 6 - 90);
};
updateAngle();
const interval = setInterval(updateAngle, 1000);
return () => clearInterval(interval);
}, []); // angleは依存しない
return (
);
}重要なポイント
1. `useEffect`の依存配列に`angle`を含めないこと。これにより、無限ループを防ぎ、秒針が毎秒更新されるようになります。
2. `setAngle`で更新された`angle`を即時反映させるため、`angle`の更新を直接管理します。
まとめ
Reactで秒針の動作を管理している際、無限ループによって秒針が1秒ごとに一周回る問題は、`useEffect`の依存配列に`angle`を含めることが原因です。依存配列から`angle`を取り除き、`setAngle`の更新処理を適切に行うことで、この問題を解決できます。これにより、秒針が正しく1秒ごとに動くようになります。
コメント