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]

🦋 Changeset detected

Latest commit: 47f9c83

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
wagmi	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another 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	Sep 27, 2024 3:10pm

[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?

[weilliao05621]

sure! will be working on the test case

[weilliao05621]

screenshot for passing unit test

---

I also do manual test with the playground:)
Here's the playground code for testing:

const MemoAccount = memo(function (props: {
  store: ReturnType<typeof useAccount>
}) {
  console.log("account update!")
  return <div>{props.store.address}</div>
})

function RerenderWithAccount() {
  const account = useAccount()
  const [count, setCount] = useState<number>(0)

  return (
    <>
      <MemoAccount store={account} />
      <button
        onClick={() => {
          setCount((prev) => prev + 1)
        }}
      >
        Update count: {count}
      </button>
    </>
  )
}