Phase 2d: RAF-Loop + setState fixen — kontinuierlicher requestAnimationFrame-Loop (G3 fix) #44

New issue

Closed

opened 2026-06-18 06:17:58 +00:00 by Artur · 1 comment

Artur commented

2026-06-18 06:17:58 +00:00

Owner

Problembeschreibung

Test G3 ("RAF Loop + setState — wiederholte Updates") schlägt fehl. React-Komponenten die requestAnimationFrame in einer Schleife verwenden (z.B. für Animationen, Timer-Updates, FPS-Zähler), erwarten dass RAF kontinuierlich feuert. Der aktuelle RAF-Shim feuert nur einmal pro request und dann nie wieder — das bricht Reacts render-loop für animation-basierte Updates.

Ursache

Aktueller RAF-Shim (vereinfacht):

let rafId = 0;
const rafCallbacks = new Map();
function requestAnimationFrame(callback) {
  const id = ++rafId;
  rafCallbacks.set(id, callback);
  setTimeout(() => { callback(performance.now()); rafCallbacks.delete(id); }, 16);
  return id;
}

React-Komponenten die RAF in einer Schleife nutzen, rufen requestAnimationFrame beim ersten Callback erneut auf — aber der zweite request bekommt keinen Timer, weil der setTimeout-Mechanismus nicht rekursiv schedult.

Lösungsansätze

Option A: Kontinuierlicher RAF-Loop (empfohlen)

RAF feuert in einer Endlosschleife, ähnlich wie im Browser (ca. 60fps), solange Callbacks registriert sind.

Option B: Configurable Frame Rate

Per Page-Option steuerbar: page.setFrameRate(30) — für deterministische Tests.

Akzeptanzkriterien

G3 Test läuft durch: RAF-Loop aktualisiert React State wiederholt
RAF feuert kontinuierlich (~60fps) solange Callbacks registriert sind
cancelAnimationFrame stoppt den Loop korrekt
Keine CPU-Leaks: Loop stoppt wenn keine Callbacks mehr existieren
Bestehende RAF-Tests (tolerant-proxy, React-rendering) bleiben grün

Betroffene Dateien

src/fakes/raf.ts (oder equivalent)
tests/interaction/react-comprehensive.test.ts (G3)
tests/unit/raf.test.ts (neue Tests)

Cross-Referenzen

G3 (einer der 4 pre-existing failures)
#33 (Concurrent Mode Polyfills — rAF Batching)

## Problembeschreibung Test G3 ("RAF Loop + setState — wiederholte Updates") schlägt fehl. React-Komponenten die `requestAnimationFrame` in einer Schleife verwenden (z.B. für Animationen, Timer-Updates, FPS-Zähler), erwarten dass RAF kontinuierlich feuert. Der aktuelle RAF-Shim feuert nur einmal pro request und dann nie wieder — das bricht Reacts render-loop für animation-basierte Updates. ## Ursache Aktueller RAF-Shim (vereinfacht): ``` let rafId = 0; const rafCallbacks = new Map(); function requestAnimationFrame(callback) { const id = ++rafId; rafCallbacks.set(id, callback); setTimeout(() => { callback(performance.now()); rafCallbacks.delete(id); }, 16); return id; } ``` React-Komponenten die RAF in einer Schleife nutzen, rufen `requestAnimationFrame` beim ersten Callback erneut auf — aber der zweite request bekommt keinen Timer, weil der setTimeout-Mechanismus nicht rekursiv schedult. ## Lösungsansätze ### Option A: Kontinuierlicher RAF-Loop (empfohlen) RAF feuert in einer Endlosschleife, ähnlich wie im Browser (ca. 60fps), solange Callbacks registriert sind. ### Option B: Configurable Frame Rate Per Page-Option steuerbar: `page.setFrameRate(30)` — für deterministische Tests. ## Akzeptanzkriterien - [ ] G3 Test läuft durch: RAF-Loop aktualisiert React State wiederholt - [ ] RAF feuert kontinuierlich (~60fps) solange Callbacks registriert sind - [ ] cancelAnimationFrame stoppt den Loop korrekt - [ ] Keine CPU-Leaks: Loop stoppt wenn keine Callbacks mehr existieren - [ ] Bestehende RAF-Tests (tolerant-proxy, React-rendering) bleiben grün ## Betroffene Dateien - `src/fakes/raf.ts` (oder equivalent) - `tests/interaction/react-comprehensive.test.ts` (G3) - `tests/unit/raf.test.ts` (neue Tests) ## Cross-Referenzen - G3 (einer der 4 pre-existing failures) - #33 (Concurrent Mode Polyfills — rAF Batching)

Artur added the

bug

label

2026-06-18 06:17:58 +00:00

Artur commented

2026-06-18 07:12:24 +00:00

Author

Owner

Superseded by neues RAF-Shim in ACTION-PLAN.md Phase 1.

Artur closed this issue

2026-06-18 07:12:24 +00:00