Skip to content

Conversation

@bobnik
Copy link
Collaborator

@bobnik bobnik commented Jan 21, 2026

Performance Optimizations

Summary: Speed up the app in general with fewer re-renders.

  • Math optimizations: Replace Math.pow(x, 2) with x * x via new magnitude() utility. Function call overhead makes Math.pow ~10-20x slower than direct multiplication for squaring. This is called frequently in geometry calculations (distance, polar coordinates) so the savings add up.

  • Faster deep cloning: Replace JSON.parse(JSON.stringify()) with structuredClone().structuredClone is a native browser API that's identical and faster.

  • Memoize list rows: Add React.memo to LayerRow and EffectRow components. These re-render on every parent render even when their props haven't changed. With many layers/effects, this causes unnecessary work during drag operations and state updates.

  • Stabilize callback references: Wrap event handlers in useCallback throughout LayerList, EffectList, ShapePreview, EffectPreview. Without this, new function references are created on every render, which makes React.memo useless on child components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants