[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:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user