02 Use Effect Deps

1// T4 case 02 — useEffect with non-empty deps performs side effects per render.
2//
3// Should be detected by lint_source.py as blocker r2hf/use-effect-deps.
4// The skill should refuse to translate.
5//
6// Why this is a blocker: side effects (network, DOM mutation outside the
7// rendered tree, timers) don't translate to a seek-driven model. HF assumes
8// the page is fully rendered and pure between seeks.
9
10import React, { useEffect, useRef } from "react";
11import { AbsoluteFill, useCurrentFrame } from "remotion";
12
13export const SideEffectDriven: React.FC = () => {
14  const frame = useCurrentFrame();
15  const canvasRef = useRef<HTMLCanvasElement>(null);
16
17  useEffect(() => {
18    const canvas = canvasRef.current;
19    if (!canvas) return;
20    const ctx = canvas.getContext("2d");
21    ctx?.fillRect(frame, frame, 10, 10);
22  }, [frame]);
23
24  return (
25    <AbsoluteFill>
26      <canvas ref={canvasRef} width={1280} height={720} />
27    </AbsoluteFill>
28  );
29};