Reactで、針が動くアナログ時計を作る方法

export type HandAngles = { hour: number; minute: number; second: number };

// 針の角度（12時を 0 度として、時計回りの度）を返す
// smooth が true なら、秒針もミリ秒の分だけ進める
export function handAngles(date: Date, smooth = false): HandAngles {
  const s = date.getSeconds() + (smooth ? date.getMilliseconds() / 1000 : 0);
  const m = date.getMinutes() + s / 60;
  const h = (date.getHours() % 12) + m / 60;
  return { hour: h * 30, minute: m * 6, second: s * 6 };
}

03:00:00.000 カチカチ: 時針 90.00度 / 分針 0.00度 / 秒針 0.00度
06:30:00.000 カチカチ: 時針 195.00度 / 分針 180.00度 / 秒針 0.00度
09:45:30.000 カチカチ: 時針 292.75度 / 分針 273.00度 / 秒針 180.00度
10:09:50.700 カチカチ: 時針 304.92度 / 分針 59.00度 / 秒針 300.00度
             なめらか: 時針 304.92度 / 分針 59.07度 / 秒針 304.20度
15:00:00.000 カチカチ: 時針 90.00度 / 分針 0.00度 / 秒針 0.00度

import { handAngles } from './clock';
import { useNow } from './useNow';

type Props = { smooth?: boolean; size?: number };

// 文字盤の数字の位置（中心 100,100 から半径 r、12時から時計回りに deg 度）
function polar(deg: number, r: number) {
  const rad = (deg * Math.PI) / 180;
  return { x: 100 + r * Math.sin(rad), y: 100 - r * Math.cos(rad) };
}

export function AnalogClock({ smooth = false, size = 200 }: Props) {
  const now = useNow(smooth);
  const { hour, minute, second } = handAngles(now, smooth);
  const label = `${now.getHours()}時${now.getMinutes()}分`;

  return (
    <svg viewBox="0 0 200 200" width={size} height={size} role="img" aria-label={label}>
      <circle cx="100" cy="100" r="96" fill="#fff" stroke="#1f2a30" strokeWidth="4" />
      {Array.from({ length: 60 }, (_, i) => (
        <line
          key={i}
          x1="100" y1="8" x2="100" y2={i % 5 === 0 ? 20 : 14}
          stroke="#1f2a30" strokeWidth={i % 5 === 0 ? 3 : 1}
          transform={`rotate(${i * 6} 100 100)`}
        />
      ))}
      {Array.from({ length: 12 }, (_, i) => {
        const { x, y } = polar((i + 1) * 30, 70);
        return (
          <text key={i} x={x} y={y} textAnchor="middle" dominantBaseline="central" fontSize="16" fill="#1f2a30">
            {i + 1}
          </text>
        );
      })}
      <line className="hour" x1="100" y1="112" x2="100" y2="50" stroke="#1f2a30" strokeWidth="6" strokeLinecap="round"
        transform={`rotate(${hour} 100 100)`} />
      <line className="minute" x1="100" y1="114" x2="100" y2="24" stroke="#1f2a30" strokeWidth="4" strokeLinecap="round"
        transform={`rotate(${minute} 100 100)`} />
      <line className="second" x1="100" y1="120" x2="100" y2="16" stroke="#d85878" strokeWidth="2"
        transform={`rotate(${second} 100 100)`} />
      <circle cx="100" cy="100" r="4" fill="#d85878" />
    </svg>
  );
}

03:00:00 時針 90度 先 (60.0, 0.0) / 分針 0度 先 (0.0, -91.2) / 秒針 0度 先 (0.0, -100.8)
06:30:00 時針 195度 先 (-15.5, 58.0) / 分針 180度 先 (0.0, 91.2) / 秒針 0度 先 (0.0, -100.8)
09:45:30 時針 292.75度 先 (-55.3, -23.2) / 分針 273度 先 (-91.1, -4.8) / 秒針 180度 先 (0.0, 100.8)

import { useEffect, useState } from 'react';

// 今の時刻を返す。smooth なら画面の描き換えごと、そうでなければ秒が変わるごとに更新する
export function useNow(smooth: boolean): Date {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    let id = 0;
    if (smooth) {
      const loop = () => {
        setNow(new Date());
        id = requestAnimationFrame(loop);
      };
      id = requestAnimationFrame(loop);
      return () => cancelAnimationFrame(id);
    }
    // 次の秒の変わり目まで待ってから更新し、また次の変わり目を待つ
    const tick = () => {
      const d = new Date();
      setNow(d);
      id = window.setTimeout(tick, 1000 - d.getMilliseconds());
    };
    tick();
    return () => clearTimeout(id);
  }, [smooth]);
  return now;
}

記事のコード:
  更新 10回 / 更新したときのミリ秒: 1, 2, 1, 2, 1, 2, 1, 2, 1, 1
setInterval で 1000ms ごと:
  更新 10回 / 更新したときのミリ秒: 872, 871, 871, 870, 870, 871, 871, 871, 870, 870

  オフ: 1秒間の秒針の更新回数 1
  オン: 1秒間の秒針の更新回数 60 / 最初の5回 rotate(24.576 100 100) rotate(24.678000000000004 100 100) rotate(24.78 100 100) rotate(24.882 100 100) rotate(24.978 100 100)
  オフに戻す: 1秒間の秒針の更新回数 1

.second { transition: transform 0.3s; }

  transition の途中の見た目の角度（-180〜180度で表示）: 0ms -6.0度 / 75ms -150.6度 / 150ms 69.9度 / 225ms 14.0度 / 300ms 0.0度

  10:59:59: transform 属性 rotate(359.9 100 100) / 見た目の角度 -0.1
  11:00:00 になった直後: transform 属性 rotate(0 100 100) / 動いているアニメーション 1
  transition の途中の見た目の角度（-180〜180度で表示）: 0ms -0.1度 / 75ms -147.1度 / 150ms 71.1度 / 225ms 14.2度 / 300ms 0.0度