apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx (2)

96-122: Review the prevX check and consider prevY for completeness.

The rendering loop correctly implements dynamic sampling with bounds checking. However, the condition if (prevX !== x) only checks x-coordinate changes:

if (prevX !== x) {
  ctx.bezierCurveTo(cpX1, prevY, cpX2, y, x, y);
  prevX = x;
  prevY = y;
}

While this optimization prevents drawing when x hasn't changed, it may skip drawing vertical amplitude changes at the same x-coordinate (which can happen with the dynamic sampleStep). Consider whether you should also check prevY !== y or remove the condition entirely if vertical changes are significant.

If vertical changes should always be rendered, apply this diff:

-if (prevX !== x) {
+if (prevX !== x || prevY !== y) {
   const cpX1 = prevX + step / 2;
   const cpX2 = x - step / 2;
   ctx.bezierCurveTo(cpX1, prevY, cpX2, y, x, y);
   prevX = x;
   prevY = y;
 }

---

164-172: Consider using createComputed or moving logic to renderWaveforms.

The createEffect explicitly tracks dependencies with void statements, which works but is somewhat unconventional. In Solid.js, effects automatically track accessed signals. The current pattern forces tracking and cancels/schedules RAF on every dependency change.

Based on learnings, minimize useEffect (or createEffect in Solid) and prefer computing during render or in event handlers. Consider these alternatives:

1. Move RAF scheduling to renderWaveforms (preferred): Let the function access reactive values directly, and Solid will track them automatically.
2. Use createComputed if you need fine-grained tracking: This runs synchronously and is more appropriate for derived state.

Option 1 (preferred): Remove explicit void tracking and simplify

 createEffect(() => {
-  // track reactive deps
-  void width();
-  void secsPerPixel();
-  void project.audio.micVolumeDb;
-  void project.audio.systemVolumeDb;
   if (rafId !== null) cancelAnimationFrame(rafId);
   rafId = requestAnimationFrame(renderWaveforms);
 });

Solid will automatically track dependencies accessed in renderWaveforms.

Option 2: Use createComputed for synchronous updates

-createEffect(() => {
+createComputed(() => {
   // track reactive deps
   void width();
   void secsPerPixel();
   void project.audio.micVolumeDb;
   void project.audio.systemVolumeDb;
   if (rafId !== null) cancelAnimationFrame(rafId);
   rafId = requestAnimationFrame(renderWaveforms);
 });

Based on learnings

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
PR: CapSoftware/Cap#0
File: CLAUDE.md:0-0
Timestamp: 2025-10-14T10:15:44.019Z
Learning: Applies to apps/web/**/*.{tsx} : Minimize useEffect; compute during render, put logic in event handlers, and clean up subscriptions/timers