Stabilize data

eea · Dec 29, 2022 · 65f8ee8 · 65f8ee8
1 parent 153eedc
commit 65f8ee8
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 20 deletions.
diff --git a/searchlib/components/SearchApp/BasicSearchApp.jsx b/searchlib/components/SearchApp/BasicSearchApp.jsx
@@ -11,9 +11,10 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { AppConfigContext, SearchContext } from '@eeacms/search/lib/hocs';
 import { bindOnAutocomplete, bindOnSearch } from '@eeacms/search/lib/request';
 import useSearchApp from './useSearchApp';
+import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
-function SearchWrappers(SearchViewComponent) {
-  function Wrapper(props) {
+function applySearchWrappers(SearchViewComponent) {
+  function SearchWrapper(props) {
     const {
       appConfig,
       appConfigContext,
@@ -26,6 +27,7 @@ function SearchWrappers(SearchViewComponent) {
     } = props;
 
     const [payload, update] = React.useState(appConfigContext);
+    React.useEffect(() => () => console.log('unmount SearchWrappers'), []);
 
     return (
       <AppConfigContext.Provider value={{ payload, update }}>
@@ -43,7 +45,7 @@ function SearchWrappers(SearchViewComponent) {
       </AppConfigContext.Provider>
     );
   }
-  return Wrapper;
+  return SearchWrapper;
 }
 
 export default function BasicSearchApp(props) {
@@ -54,7 +56,6 @@ export default function BasicSearchApp(props) {
     paramOnSearch = bindOnSearch,
     paramOnAutocomplete = bindOnAutocomplete,
     searchViewComponent,
-    children,
     initialState,
     ...rest
   } = props;
@@ -73,6 +74,10 @@ export default function BasicSearchApp(props) {
     initialState,
   });
 
+  const mappedWithSearch = React.useMemo(() => withSearch(mapContextToProps), [
+    mapContextToProps,
+  ]);
+
   const [stableContext, setStableContext] = React.useState({
     appConfig,
     registry,
@@ -83,10 +88,15 @@ export default function BasicSearchApp(props) {
   }, [appConfig, registry]);
 
   const WrappedSearchView = React.useMemo(() => {
-    return withSearch(mapContextToProps)(
-      SearchWrappers(searchViewComponent, children),
-    );
-  }, [mapContextToProps, searchViewComponent, children]);
+    return mappedWithSearch(applySearchWrappers(searchViewComponent));
+  }, [mappedWithSearch, searchViewComponent]);
+
+  useWhyDidYouUpdate('BasicSearchApp', {
+    mapContextToProps,
+    searchViewComponent,
+    WrappedSearchView,
+    registry,
+  });
 
   return driverInstance ? (
     <SearchProvider config={elasticConfig} driver={driverInstance}>

diff --git a/searchlib/components/SearchApp/useSearchApp.js b/searchlib/components/SearchApp/useSearchApp.js
@@ -15,6 +15,7 @@ import {
 import { resetFilters, resetSearch } from './request';
 import useFacetsWithAllOptions from './useFacetsWithAllOptions';
 import { loadingFamily, driverFamily } from './state';
+import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 export function useSearchDriver({ elasticConfig, appName }) {
   const driverAtom = driverFamily({ elasticConfig, appName });
@@ -114,6 +115,12 @@ export default function useSearchApp({
     [appConfig, driverInstance, facetOptions],
   );
 
+  useWhyDidYouUpdate('useSearchApp', {
+    appConfig,
+    driverInstance,
+    facetOptions,
+  });
+
   return {
     facetOptions,
     mapContextToProps,

diff --git a/searchlib/components/SearchView/SearchView.jsx b/searchlib/components/SearchView/SearchView.jsx
@@ -48,6 +48,7 @@ export const SearchView = (props) => {
 
   const customClassName = !wasInteracted ? 'landing-page' : 'simple-page';
 
+  React.useEffect(() => () => console.log('unmount SearchView'), []);
   return (
     <div className={`searchapp searchapp-${appName} ${customClassName}`}>
       <Layout

diff --git a/src/SearchBlock/SearchBlockEdit.jsx b/src/SearchBlock/SearchBlockEdit.jsx
@@ -4,14 +4,22 @@ import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
 import SearchBlockView from './SearchBlockView';
 import config from '@plone/volto/registry';
 import { useDebouncedStableData } from './hocs';
+import useWhyDidYouUpdate from '@eeacms/search/lib/hocs/useWhyDidYouUpdate';
 
 const SearchBlockEdit = (props) => {
   const { onChangeBlock, block, data } = props;
 
-  const stableData = useDebouncedStableData(data);
+  const stableData = useDebouncedStableData(
+    Object.assign(
+      {},
+      ...Object.keys(data)
+        .filter((k) => k !== 'slotFills')
+        .map((k) => ({ [k]: data[k] })),
+    ),
+  );
 
   const schema = React.useMemo(() => {
-    const schema = SearchBlockSchema({ formData: stableData || {} });
+    const schema = SearchBlockSchema({ formData: stableData });
 
     const { searchui } = config.settings.searchlib;
 
@@ -31,33 +39,37 @@ const SearchBlockEdit = (props) => {
   const onChangeSlotfill = React.useCallback(
     (slotId, value) => {
       const newValue = {
-        ...stableData,
+        ...data,
         slotFills: {
-          ...(stableData.slotFills || {}),
+          ...(data.slotFills || {}),
           [slotId]: {
-            ...(stableData?.slotFills?.[slotId] || {}),
+            ...(data?.slotFills?.[slotId] || {}),
             ...value,
           },
         },
       };
       onChangeBlock(block, newValue);
     },
-    [block, stableData, onChangeBlock],
+    [block, data, onChangeBlock],
   );
 
+  React.useEffect(() => () => console.log('unmount SearchBlockEdit'), []);
+
   const onDeleteSlotfill = React.useCallback(
     (slotId) => {
       onChangeBlock(block, {
-        ...stableData,
+        ...data,
         slotFills: {
-          ...(stableData.slotFills || {}),
+          ...(data.slotFills || {}),
           [slotId]: undefined,
         },
       });
     },
-    [block, onChangeBlock, stableData],
+    [block, onChangeBlock, data],
   );
 
+  useWhyDidYouUpdate('SearchBlockEdit', { schema });
+
   return (
     <div>
       <SearchBlockView

diff --git a/src/SearchBlock/SearchBlockView.jsx b/src/SearchBlock/SearchBlockView.jsx
@@ -19,7 +19,15 @@ function SearchBlockView(props) {
     metadata,
   } = props;
   const { appName = 'default' } = data;
-  const stableData = useDebouncedStableData(data);
+
+  const stableData = useDebouncedStableData(
+    Object.assign(
+      {},
+      ...Object.keys(data)
+        .filter((k) => k !== 'slotFills')
+        .map((k) => ({ [k]: data[k] })),
+    ),
+  );
 
   const schema = React.useMemo(() => {
     let schema = SearchBlockSchema({ formData: stableData });
@@ -53,6 +61,7 @@ function SearchBlockView(props) {
   }, [appName, stableData, schema, mode]);
 
   const Variation = variation.view;
+  React.useEffect(() => () => console.log('unmount SearchBlockView'), []);
 
   return (
     <div>

diff --git a/src/SearchBlock/utils.js b/src/SearchBlock/utils.js
@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 
 /**
  * Reuse the schema to allow pinpointing in the config, to allow adjusting the
@@ -10,7 +10,7 @@ import { cloneDeep } from 'lodash';
  * - with `modifyConfig` you can write a function that can change the settings
  *
  */
-export const applyBlockSettings = (config, appName, data, schema) => {
+const _applyBlockSettings = (config, appName, data, schema) => {
   // apply mutations inline to the config
 
   config = cloneDeep(config);
@@ -47,3 +47,16 @@ export const applyBlockSettings = (config, appName, data, schema) => {
   }
   return config;
 };
+
+let _params, _cachedResult;
+
+const cacheOnce = (func) => (config, appName, data, schema) => {
+  if (!_params || !isEqual(_params, { appName, data })) {
+    _cachedResult = _applyBlockSettings(config, appName, data, schema);
+    _params = { appName, data };
+    console.log('recomputed');
+  }
+  return _cachedResult;
+};
+
+export const applyBlockSettings = cacheOnce(_applyBlockSettings);