[React SDK] Feature: Improved React Query Caching (#4446)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR improves React Query caching performance by optimizing structural sharing in the `ThirdwebProviderCore`.

### Detailed summary
- Added `structuralSharing` function to optimize caching performance
- Implemented `deepEqual` function for deep comparison
- Updated `ThirdwebProviderCore` to use `structuralSharing` for better caching efficiency

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
This commit is contained in:
gregfromstl
2024-09-06 20:29:29 +00:00
parent a2d22911bc
commit f39e1bab8f
3 changed files with 60 additions and 0 deletions
@@ -6,6 +6,7 @@ import { isBaseTransactionOptions } from "../../../transaction/types.js";
import type { Hex } from "../../../utils/encoding/hex.js";
import { isObjectWithKeys } from "../../../utils/type-guards.js";
import type { ConnectionManager } from "../../../wallets/manager/index.js";
import { structuralSharing } from "../utils/structuralSharing.js";
import { SetRootElementContext } from "./RootElementContext.js";
import { ConnectionManagerCtx } from "./connection-manager.js";
import { invalidateWalletBalance } from "./invalidateWalletBalance.js";
@@ -63,6 +64,7 @@ export function ThirdwebProviderCore(props: {
// With SSR, we usually want to set some default staleTime
// above 0 to avoid refetching immediately on the client
staleTime: 60 * 1000,
structuralSharing,
},
},
}),
@@ -0,0 +1,53 @@
import { replaceEqualDeep } from "@tanstack/react-query";
/** Forked from https://github.com/epoberezkin/fast-deep-equal */
// biome-ignore lint/suspicious/noExplicitAny: This function by nature takes any object
export function deepEqual(a: any, b: any) {
if (a === b) return true;
if (a && b && typeof a === "object" && typeof b === "object") {
if (a.constructor !== b.constructor) return false;
let length: number;
let i: number;
if (Array.isArray(a) && Array.isArray(b)) {
length = a.length;
if (length !== b.length) return false;
for (i = length; i-- !== 0; ) if (!deepEqual(a[i], b[i])) return false;
return true;
}
if (a.valueOf !== Object.prototype.valueOf)
return a.valueOf() === b.valueOf();
if (a.toString !== Object.prototype.toString)
return a.toString() === b.toString();
const keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0; )
// biome-ignore lint/style/noNonNullAssertion: We know its there
if (!Object.prototype.hasOwnProperty.call(b, keys[i]!)) return false;
for (i = length; i-- !== 0; ) {
const key = keys[i];
if (key && !deepEqual(a[key], b[key])) return false;
}
return true;
}
// true if both NaN, false otherwise
// biome-ignore lint/suspicious/noSelfCompare: <explanation>
return a !== a && b !== b;
}
export function structuralSharing<T>(oldData: T | undefined, newData: T) {
if (deepEqual(oldData, newData)) {
return oldData as T;
}
return replaceEqualDeep(oldData, newData) as T;
}