fix(studio): prevent infinite render loop in new-project form#46131
Conversation
form.formState is a Proxy that returns a new reference on every render, so including it in the effect deps caused the dataApiDefaultPrivileges sync effect to refire after every setValue. Pull the dirty check out of the effect and depend on the resulting stable boolean instead.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR fixes an infinite loop in the form synchronization logic for ChangesForm State Synchronization Fix
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
joshenlim
left a comment
There was a problem hiding this comment.
Verified changes on preview!
🎭 Playwright Test ResultsDetails
Flaky testsFeatures › database-webhooks.spec.ts › Database Webhooks › preserves webhook URL path and custom headers after editing Skipped testsFeatures › auth-users.spec.ts › should show web3 users as enabled when the matching web3 provider is enabled |
Braintrust eval report
|
Fixes a "Maximum update depth exceeded" infinite render loop on
/new/[slug]introduced by #46085. The symptom showed up on the internal-only configuration dropdown, but the entire form was looping.Root cause
The new
useEffectthat syncsdataApiDefaultPrivilegesto the experiment-driven default hadform.formStatein its deps.form.formStateis a react-hook-form Proxy that returns a new reference on every render, so the effect refired after every render →setValue→ render → effect → loop.Fix
Pull the dirty check out of the effect into a stable boolean computed during render, and drop
form.formStatefrom the deps. Semantics unchanged — still syncs on flag resolve, still skips when the user has touched the field.To test
/new/[slug]and confirm there's no "Maximum update depth exceeded" error in the consoledata-api-revoke-on-create-defaultflag off, confirmdataApiDefaultPrivilegesdefaults totrue; with it on, defaults tofalseSummary by CodeRabbit