fix: prevent component re-rendering with the same account snapshot

[weilliao05621]

In addressing performance issues with a specific React hook, I identified that components using this hook were re-rendering unnecessarily. This was caused by the hook destructuring an object, which created a new reference each time it executed.

// `trackedResult` will always has new reference when the hook executed
 const trackedResult = { ...result }

To optimize this, I use useMemo to wrap the returned object. This change prevents the creation of a new object reference on every execution, ensuring that the object is only recalculated when its dependencies change. As a result, the number of re-renders for components utilizing this hook has significantly decreased.

Screenshots

Have tried the updated version in the project's react playground.

Before

2024-08-27.8.35.24.mov

After

2024-08-27.8.34.09.mov

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8ccf41d

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]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wagmi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 27, 2024 1:01pm

[0x33dm]

Nice catch! i hope this gets merged soon.

[tmm]

Can you post the playground code that demonstrates this behavior or add a test that reproduces?