-
Notifications
You must be signed in to change notification settings - Fork 1.6k
fix: move useCallback hooks before early returns in React hooks #5427
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
This fixes the 'Rendered more hooks than during the previous render' error that occurs when using useAppKitConnections and useAppKitConnection hooks. The issue was that useCallback hooks were being called after conditional early returns, which violates React's rules of hooks - hooks must be called unconditionally in the same order on every render. Changes: - useAppKitConnections: moved formatConnection useCallback before the isMultiWalletEnabled early return - useAppKitConnection: moved switchConnection and deleteConnection useCallback hooks before the isMultiWalletEnabled early return Co-Authored-By: enes@reown.com <enes@reown.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
10 Skipped Deployments
|
Visual Regression Test Results ✅ PassedChromatic Build: https://www.chromatic.com/build?appId=6493191bf4b10fed8ca7353f&number=535 👉 Please review the visual changes in Chromatic and accept or reject them. |
📦 Bundle Size Check✅ All bundles are within size limits 📊 View detailed bundle sizes> @reown/appkit-monorepo@1.7.1 size /home/runner/work/appkit/appkit > size-limit [baseline-browser-mapping] The data in this module is over two months old. To ensure accurate Baseline data, please update: |
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
Description
Fixes the "Rendered more hooks than during the previous render" error that occurs when using
useAppKitConnectionsanduseAppKitConnectionhooks in React apps.The issue was that
useCallbackhooks were being called after conditional early returns based onisMultiWalletEnabled. When this flag changes fromfalsetotruebetween renders, React detects that more hooks are being called than in the previous render, violating the rules of hooks.Changes:
useAppKitConnections: MovedformatConnectionuseCallback before theisMultiWalletEnabledearly returnuseAppKitConnection: MovedswitchConnectionanddeleteConnectionuseCallback hooks before theisMultiWalletEnabledearly returnType of change
Associated Issues
Related Slack thread: https://reown-inc.slack.com/archives/C07C28F0ALX/p1767013639520839
Checklist
Human Review Checklist
useCallbackcalls now happen before any early returnschainNamespace(used in callback dependencies) is validated before the hooks are definedexamples/next-appkit-headlessto confirm the error is resolvedLink to Devin run: https://app.devin.ai/sessions/87460e12b1da4c798619c61ac7b87bab
Requested by: enes@reown.com