Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

Description

Fixes the "Rendered more hooks than during the previous render" error that occurs when using useAppKitConnections and useAppKitConnection hooks in React apps.

The issue was that useCallback hooks were being called after conditional early returns based on isMultiWalletEnabled. When this flag changes from false to true between renders, React detects that more hooks are being called than in the previous render, violating the rules of hooks.

Changes:

  • useAppKitConnections: Moved formatConnection useCallback before the isMultiWalletEnabled early return
  • useAppKitConnection: Moved switchConnection and deleteConnection useCallback hooks before the isMultiWalletEnabled early return

Type of change

  • Chore (non-breaking change that addresses non-functional tasks, maintenance, or code quality improvements)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Associated Issues

Related Slack thread: https://reown-inc.slack.com/archives/C07C28F0ALX/p1767013639520839

Checklist

  • Code in this PR is covered by automated tests (Unit tests, E2E tests)
  • My changes generate no new warnings
  • I have reviewed my own code
  • I have filled out all required sections
  • I have tested my changes on the preview link
  • Approver of this PR confirms that the changes are tested on the preview link

Human Review Checklist

  • Verify hook order is correct: all useCallback calls now happen before any early returns
  • Confirm chainNamespace (used in callback dependencies) is validated before the hooks are defined
  • Test with examples/next-appkit-headless to confirm the error is resolved

Link to Devin run: https://app.devin.ai/sessions/87460e12b1da4c798619c61ac7b87bab
Requested by: enes@reown.com

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-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@changeset-bot
Copy link

changeset-bot bot commented Dec 29, 2025

⚠️ No Changeset found

Latest commit: 5ff7e55

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Dec 29, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
appkit-basic-html Ready Ready Preview, Comment Dec 29, 2025 1:18pm
appkit-demo Ready Ready Preview, Comment Dec 29, 2025 1:18pm
appkit-gallery Ready Ready Preview, Comment Dec 29, 2025 1:18pm
appkit-headless-sample-app Ready Ready Preview, Comment Dec 29, 2025 1:18pm
appkit-laboratory Ready Ready Preview, Comment Dec 29, 2025 1:18pm
10 Skipped Deployments
Project Deployment Review Updated (UTC)
appkit-basic-example Ignored Ignored Dec 29, 2025 1:18pm
appkit-basic-sign-client-example Ignored Ignored Dec 29, 2025 1:18pm
appkit-basic-up-example Ignored Ignored Dec 29, 2025 1:18pm
appkit-ethers5-bera Ignored Ignored Dec 29, 2025 1:18pm
appkit-nansen-demo Ignored Ignored Dec 29, 2025 1:18pm
appkit-vue-solana Ignored Ignored Dec 29, 2025 1:18pm
appkit-wagmi-cdn-example Ignored Ignored Dec 29, 2025 1:18pm
ethereum-provider-wagmi-example Ignored Ignored Dec 29, 2025 1:18pm
next-wagmi-solana-bitcoin-example Ignored Ignored Dec 29, 2025 1:18pm
vue-wagmi-example Ignored Ignored Dec 29, 2025 1:18pm

@github-actions
Copy link
Contributor

Visual Regression Test Results ✅ Passed

⚠️ 6 visual change(s) detected

Chromatic Build: https://www.chromatic.com/build?appId=6493191bf4b10fed8ca7353f&number=535
Storybook Preview: https://6493191bf4b10fed8ca7353f-qqraiiahyt.chromatic.com/

👉 Please review the visual changes in Chromatic and accept or reject them.

@github-actions
Copy link
Contributor

📦 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: npm i baseline-browser-mapping@latest -D

@reown/appkit - Main Entry
Size limit:   80 kB
Size:         73.96 kB with all dependencies, minified and gzipped
Loading time: 1.5 s    on slow 3G
Running time: 682 ms   on Snapdragon 410
Total time:   2.2 s
@reown/appkit/react
Size limit:   230 kB
Size:         229.24 kB with all dependencies, minified and gzipped
Loading time: 4.5 s     on slow 3G
Running time: 1.8 s     on Snapdragon 410
Total time:   6.3 s
@reown/appkit/vue
Size limit:   80 kB
Size:         73.96 kB with all dependencies, minified and gzipped
Loading time: 1.5 s    on slow 3G
Running time: 627 ms   on Snapdragon 410
Total time:   2.1 s
@reown/appkit-scaffold-ui
Size limit:   220 kB
Size:         209.35 kB with all dependencies, minified and gzipped
Loading time: 4.1 s     on slow 3G
Running time: 1.4 s     on Snapdragon 410
Total time:   5.5 s
@reown/appkit-ui
Size limit:   500 kB
Size:         13.15 kB with all dependencies, minified and gzipped
Loading time: 257 ms   on slow 3G
Running time: 150 ms   on Snapdragon 410
Total time:   407 ms

@github-actions
Copy link
Contributor

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 79.78% 38440 / 48181
🔵 Statements 79.78% 38440 / 48181
🔵 Functions 77.23% 4112 / 5324
🔵 Branches 86.55% 9344 / 10796
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/controllers/exports/react.ts 85.53% 95.65% 43.47% 85.53% 61-70, 91-99, 106-113, 128, 136, 154, 397, 427-428, 438-456
Generated in workflow #16565 for commit 5ff7e55 by the Vitest Coverage Report Action

@0xmkh 0xmkh enabled auto-merge December 29, 2025 13:26
@0xmkh 0xmkh added this pull request to the merge queue Dec 29, 2025
Merged via the queue into main with commit 9394d14 Dec 29, 2025
44 checks passed
@0xmkh 0xmkh deleted the devin/1767014033-fix-react-hooks-order branch December 29, 2025 13:47
@github-actions github-actions bot locked and limited conversation to collaborators Dec 29, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants