Merge pull request #3816 from udecode/perf/memo

Perf/memo

Author: zbeyens

.changeset/old-olives-scream.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Use useMemoOnce for decorate, usePlateEditor

.changeset/thirty-cats-dress.md

@@ -0,0 +1,5 @@
+---
+'@udecode/react-utils': patch
+---
+
+Add useEffectOnce, useMemoOnce

apps/www/content/docs/multi-select.mdx

@@ -15,16 +15,15 @@ Unlike traditional input-based multi-selects, this component is built on top of
 
 - Full history support (undo/redo)
 - Native cursor navigation between and within tags
-- Text selection across multiple tags
-- Copy/paste support for tags
+- Select one to many tags
+- Copy/paste tags
 - Drag and drop to reorder tags
-- Read-only mode support
+- Read-only mode
 - Duplicate tags prevention
-- Support creating new tags if not in the list
-- Automatic search text cleanup
-- Automatic whitespace trimming
-- Headless components for full styling control
-- Fuzzy search with keyboard navigation and [cmdk](https://github.com/pacocoursey/cmdk)
+- Create new tags, case insensitive
+- Search text cleanup
+- Whitespace trimming
+- Fuzzy search with [cmdk](https://github.com/pacocoursey/cmdk)
 
 </PackageInfo>
 

packages/core/src/react/components/EditorMethodsEffect.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useMemoOnce } from '@udecode/react-utils';
+
 import {
   EXPOSED_STORE_KEYS,
   useEditorRef,
@@ -18,7 +20,7 @@ export const EditorMethodsEffect = ({ id }: { id?: string }) => {
     EXPOSED_STORE_KEYS.map((key) => [key, plateStore.set[key]()])
   ) as any;
 
-  const memorizedStoreSetters = React.useMemo(
+  const memorizedStoreSetters = useMemoOnce(
     () => storeSetters,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []

packages/core/src/react/editor/usePlateEditor.ts

@@ -1,7 +1,9 @@
-import React from 'react';
+import type React from 'react';
 
 import type { Value } from '@udecode/slate';
 
+import { useMemoOnce } from '@udecode/react-utils';
+
 import type { AnyPluginConfig } from '../../lib';
 
 import {
@@ -34,7 +36,7 @@ export function usePlateEditor<
   : TEnabled extends true | undefined
     ? TPlateEditor<V, P>
     : TPlateEditor<V, P> | null {
-  return React.useMemo(
+  return useMemoOnce(
     (): any => {
       if (options.enabled === false) return null;
 

packages/core/src/react/hooks/useEditableProps.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { TEditableProps } from '@udecode/slate-react';
 
+import { useMemoOnce } from '@udecode/react-utils';
 import clsx from 'clsx';
 import omit from 'lodash/omit.js';
 import { useDeepCompareMemo } from 'use-deep-compare';
@@ -31,11 +32,11 @@ export const useEditableProps = ({
   const storeRenderLeaf = selectors.renderLeaf();
   const storeRenderElement = selectors.renderElement();
 
-  const decorateMemo = React.useMemo(() => {
+  const decorateMemo = useMemoOnce(() => {
     return pipeDecorate(editor, storeDecorate ?? editableProps?.decorate);
   }, [editableProps?.decorate, editor, storeDecorate]);
 
-  const decorate: typeof decorateMemo = React.useMemo(() => {
+  const decorate: typeof decorateMemo = useMemoOnce(() => {
     if (!versionDecorate || !decorateMemo) return;
 
     return (entry) => decorateMemo(entry);

packages/react-utils/src/index.ts

@@ -11,7 +11,9 @@ export * from './createPrimitiveComponent';
 export * from './createPrimitiveElement';
 export * from './createSlotComponent';
 export * from './useComposedRef';
+export * from './useEffectOnce';
 export * from './useIsomorphicLayoutEffect';
+export * from './useMemoOnce';
 export * from './useOnClickOutside';
 export * from './useStableMemo';
 export * from './withProviders';

packages/react-utils/src/useEffectOnce.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function useEffectOnce(
+  effect: React.EffectCallback,
+  deps: React.DependencyList
+) {
+  const initialized = React.useRef(false);
+  const prevDepsRef = React.useRef(deps);
+
+  React.useEffect(() => {
+    const depsChanged = deps.some((dep, i) => dep !== prevDepsRef.current[i]);
+
+    if (!initialized.current || depsChanged) {
+      initialized.current = true;
+      prevDepsRef.current = deps;
+      effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}

packages/react-utils/src/useMemoOnce.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export function useMemoOnce<T>(
+  factory: () => T,
+  deps: React.DependencyList
+): T {
+  const initialized = React.useRef(false);
+  const prevDepsRef = React.useRef(deps);
+  const memoizedValueRef = React.useRef<T>();
+
+  if (
+    !initialized.current ||
+    deps.some((dep, i) => dep !== prevDepsRef.current[i])
+  ) {
+    initialized.current = true;
+    prevDepsRef.current = deps;
+    memoizedValueRef.current = factory();
+  }
+
+  return memoizedValueRef.current!;
+}