@blocklet/pages-kit 0.6.104 → 0.6.106

package/lib/esm/components/CustomComponentRenderer/state.js

@@ -10,6 +10,7 @@ import { joinURL } from 'ufo';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { preloadComponents } from '../../api';
+import { useDeepCompareMemo } from '../../hooks/use-deep-compare-memo';
 import { PreloadComponentScriptModule } from '../../types';
 import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
 import { mergeComponent, parsePropertyValue } from '../../utils/property';
@@ -252,7 +253,7 @@ export function useComponent({ instanceId, componentId, properties, locale, dev
     // mode: production 不会有 transpile.props, dev 模式下会有 transpile.props，优先级最低
     const componentProps = transpile?.props ?? preload?.props;
     // 对 properties 进行转译，优先级中等
-    const dynamicComponentProps = useMemo(() => {
+    const dynamicComponentProps = useDeepCompareMemo(() => {
         return Object.fromEntries(Object.entries(properties ?? {})
             .map(([key, { value }]) => {
             const property = componentProperties?.[key]?.data;
@@ -269,7 +270,7 @@ export function useComponent({ instanceId, componentId, properties, locale, dev
             return [propKey, v];
         })
             .filter((i) => !!i));
-    }, [JSON.stringify(properties), JSON.stringify(componentProperties), locale, dev?.defaultLocale]);
+    }, [properties, componentProperties, locale, dev?.defaultLocale]);
     return {
         Component: transpile?.Component ?? preload?.Component,
         EditComponent: transpile?.EditComponent,

package/lib/esm/hooks/use-deep-compare-callback.js

@@ -0,0 +1,4 @@
+import { useDeepCompareMemo } from './use-deep-compare-memo';
+export const useDeepCompareCallback = (callback, deps) => {
+    return useDeepCompareMemo(() => callback, deps);
+};

package/lib/esm/hooks/use-deep-compare-memo.js

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+import isEqual from 'react-fast-compare';
+export const useDeepCompareMemo = (factory, deps) => {
+    const ref = useRef(null);
+    if (!ref.current || !isEqual(ref.current.deps, deps)) {
+        ref.current = { deps, value: factory() };
+    }
+    return ref.current.value;
+};