fix: memoize context values to prevent infinite re-renders#69
Conversation
|
@mvanhorn is attempting to deploy a commit to the ElevenLabs Team on Vercel. A member of the Team first needs to authorize it. |
|
@kraenhansen - friendly ping. Approved a while back, no merge activity - let me know if anything else is needed. |
|
@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>
53b1e21 to
83e9246
Compare
|
Rebased onto main and ran prettier in 83e9246. |
kraenhansen
left a comment
There was a problem hiding this comment.
Seems good to merge. I'm just waiting to see if @louisjoecodes has an opinion here. Hopefully we can merge this soon 👍 I've also created #72 to fix the lint issues. Thanks for making that obvious to me.
Summary
ActiveThemeProvidercontext value withuseMemoto prevent new object references on every renderBlockViewerProvidercontext value withuseMemofor the same reasonWhy 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.
ActiveThemeProviderwraps 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 inuseMemomaintains referential equality and breaks the render loop.Changes
apps/www/components/active-theme.tsx- wrap{ activeTheme, setActiveTheme }inuseMemoapps/www/components/block-viewer.tsx- wrap context value object inReact.useMemoTesting
pnpm run typecheckpassesmain(unrelated/radiopage data collection error)Fixes #59
This contribution was developed with AI assistance (Claude Code).