Skip to content

fix: memoize context values to prevent infinite re-renders#69

Open
mvanhorn wants to merge 1 commit intoelevenlabs:mainfrom
mvanhorn:osc/59-fix-infinite-rerender
Open

fix: memoize context values to prevent infinite re-renders#69
mvanhorn wants to merge 1 commit intoelevenlabs:mainfrom
mvanhorn:osc/59-fix-infinite-rerender

Conversation

@mvanhorn
Copy link
Copy Markdown

Summary

  • Memoize ActiveThemeProvider context value with useMemo to prevent new object references on every render
  • Memoize BlockViewerProvider context value with useMemo for the same reason
  • Consumers now only re-render when the actual context values change

Why this matters

#59 reports infinite re-renders on the home page. The reporter traced it via React Profiler to a Context Provider creating new object references per render - this is the classic unmemoized context value pattern.

ActiveThemeProvider wraps the entire app in the root layout (app/layout.tsx), so every render of that provider triggers a re-render of every consumer in the tree. Wrapping the value in useMemo maintains referential equality and breaks the render loop.

Changes

  • apps/www/components/active-theme.tsx - wrap { activeTheme, setActiveTheme } in useMemo
  • apps/www/components/block-viewer.tsx - wrap context value object in React.useMemo

Testing

  • pnpm run typecheck passes
  • Build and lint failures are pre-existing on main (unrelated /radio page data collection error)

Fixes #59

This contribution was developed with AI assistance (Claude Code).

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Mar 20, 2026

@mvanhorn is attempting to deploy a commit to the ElevenLabs Team on Vercel.

A member of the Team first needs to authorize it.

@mvanhorn
Copy link
Copy Markdown
Author

@kraenhansen - friendly ping. Approved a while back, no merge activity - let me know if anything else is needed.

@kraenhansen
Copy link
Copy Markdown
Member

@mvanhorn can I ask you to rebase and fix the prettier failure? 👍

ActiveThemeProvider and BlockViewerProvider were creating new object
references on every render, causing all context consumers to
re-render infinitely. Wrap context values in useMemo to maintain
referential equality across renders.

Fixes elevenlabs#59

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@mvanhorn mvanhorn force-pushed the osc/59-fix-infinite-rerender branch from 53b1e21 to 83e9246 Compare April 23, 2026 16:48
@mvanhorn
Copy link
Copy Markdown
Author

Rebased onto main and ran prettier in 83e9246. format:check passes locally. (The pnpm lint failure is pre-existing on main - next lint errors with 'Invalid project directory' there too, unrelated to this PR.)

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.

[Website]: Infinite re-rendering for some components in the home page

2 participants