01 Use State

1// T4 case 01 — useState drives animation.
2//
3// Should be detected by lint_source.py as blocker r2hf/use-state.
4// The skill should refuse to translate and recommend the runtime interop
5// pattern from PR #214.
6//
7// Why this is a blocker: useState is React's component-local mutable state.
8// HF's seek-driven model produces deterministic frames from a single time
9// value — there's no per-frame React render cycle to update state on.
10
11import React, { useState } from "react";
12import { AbsoluteFill, useCurrentFrame } from "remotion";
13
14export const StateDriven: React.FC = () => {
15  const frame = useCurrentFrame();
16  const [hue, setHue] = useState(0);
17
18  // Even if this looks innocuous, the setHue call breaks determinism: HF
19  // can't reproduce React state mutations across seeks.
20  if (frame % 30 === 0 && hue < 360) {
21    setHue((h) => h + 30);
22  }
23
24  return (
25    <AbsoluteFill style={{ background: `hsl(${hue}, 80%, 50%)` }}>
26      <div>frame {frame}</div>
27    </AbsoluteFill>
28  );
29};