useDeepMemo() in Refine source code.
In this article, we will review a function named useDeepMemo found in Refine source code.
const queryClient = useDeepMemo(() => {
if (reactQueryWithDefaults.clientConfig instanceof QueryClient) {
return reactQueryWithDefaults.clientConfig;
}
return new QueryClient({
...reactQueryWithDefaults.clientConfig,
defaultOptions: {
...reactQueryWithDefaults.clientConfig.defaultOptions,
queries: {
refetchOnWindowFocus: false,
keepPreviousData: true,
...reactQueryWithDefaults.clientConfig.defaultOptions?.queries,
},
},
});
}, [reactQueryWithDefaults.clientConfig]);This code snippet is picked from packages/core/src/components/containers/refine/index.tsx.
Where is useDeepMemo imported from?
as you can see from the above image, useDeepMemo is imported from @hooks/deepMemo
useDeepMemo
This below code is picked from packages/core/src/hooks/deepMemo/index.tsx.
import React, { useMemo } from "react";
import { useMemoized } from "@hooks/memoized";
/**
* Hook that memoizes the given dependency array and checks the consecutive calls with deep equality and returns the same value as the first call if dependencies are not changed.
* @internal
*/
export const useDeepMemo = <T,>(
fn: () => T,
dependencies: React.DependencyList,
): T => {
const memoizedDependencies = useMemoized(dependencies);
const value = useMemo(fn, memoizedDependencies);
return value;
};@internal in the comment here means that this is only internal use and is not exposed in the public API and has a comment explaining what this hook is about:
Hook that memoizes the given dependency array and checks the consecutive calls with deep equality and returns the same value as the first call if dependencies are not changed.
Going back to code snippet above, there is only dependency here
[reactQueryWithDefaults.clientConfig]And the function defined returns a query client.
return new QueryClient({
...reactQueryWithDefaults.clientConfig,
defaultOptions: {
...reactQueryWithDefaults.clientConfig.defaultOptions,
queries: {
refetchOnWindowFocus: false,
keepPreviousData: true,
...reactQueryWithDefaults.clientConfig.defaultOptions?.queries,
},
},
});Not sure if you have noticed but there is another hook imported, useMemoized.
import { useMemoized } from "@hooks/memoized";useMemoized
This above code snippet is imported from packages/core/src/hooks/memoized/index.tsx
import { useRef } from "react";
import isEqual from "lodash/isEqual";
/**
* Hook that memoizes the given value with deep equality.
* @internal
*/
export const useMemoized = <T = unknown>(value: T): T => {
const ref = useRef(value);
if (!isEqual(ref.current, value)) {
ref.current = value;
}
return ref.current;
};This is also another internal function and is found to be using isEqual imported from “lodash/isEqual”.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects