fix(react): only call createReactManager once

Closes #370

.changeset/lazy-shrimps-promise.md

@@ -0,0 +1,7 @@
+---
+'@remirror/react': patch
+---
+
+- Prevent `createReactManager` being called on every render.
+- Accept a `manager` as a parameter for ``createReactManager`
+- Improve internal performance of components by caching the `ReactEditorWrapper` after the first render.

packages/@remirror/react/src/components/react-editor.tsx

@@ -576,7 +576,17 @@ type SetShouldRenderClient = Dispatch<SetStateAction<boolean | undefined>>;
 function useEditorWrapper<Combined extends AnyCombinedUnion>(
   parameter: ReactEditorWrapperParameter<Combined>,
 ) {
-  return useRef(new ReactEditorWrapper<Combined>(parameter)).current.update(parameter);
+  const isFirstMount = useFirstMountState();
+  const reactEditorWrapper = useRef(
+    isFirstMount ? new ReactEditorWrapper<Combined>(parameter) : null,
+  ).current?.update(parameter);
+
+  invariant(reactEditorWrapper, {
+    message: 'Problem with `useEditorWrapper` hook.',
+    code: ErrorConstant.INTERNAL,
+  });
+
+  return reactEditorWrapper;
 }
 
 /**

packages/@remirror/react/src/hooks/editor-hooks.ts

@@ -5,6 +5,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -21,7 +22,6 @@ import {
   invariant,
   isFunction,
   isPlainObject,
-  isRemirrorManager,
   OptionsOfConstructor,
   RemirrorEventListener,
   RemirrorManager,
@@ -384,22 +384,29 @@ type UsePresetCallback<Type extends AnyPresetConstructor> = (
  * ```
  */
 export function useManager<Combined extends AnyCombinedUnion>(
-  managerOrCombined: readonly Combined[] | RemirrorManager<ReactCombinedUnion<Combined>>,
+  combined: readonly Combined[] | RemirrorManager<ReactCombinedUnion<Combined>>,
   options: CreateReactManagerOptions = {},
 ): RemirrorManager<ReactCombinedUnion<Combined>> {
-  // The manager value for the next update. It is only applied on the first
-  // render and when the previous manager has been destroyed.
-  const nextManager = isRemirrorManager<ReactCombinedUnion<Combined>>(managerOrCombined)
-    ? managerOrCombined
-    : createReactManager(managerOrCombined, options);
+  const combinedRef = useRef(combined);
+  const optionsRef = useRef(options);
 
-  const [manager, setManager] = useState(nextManager);
+  // The initial manager which will never be updated.
+  const initialManager = useMemo(() => {
+    return createReactManager(combinedRef.current, optionsRef.current);
+  }, []);
+
+  const [manager, setManager] = useState(initialManager);
+
+  combinedRef.current = combined;
+  optionsRef.current = options;
 
   useEffect(() => {
     return manager.addHandler('destroy', () => {
-      setManager(nextManager.clone());
+      // `clone` is used to ensure that that any stale extensions are
+      // reinitialized.
+      setManager(createReactManager(combinedRef.current, optionsRef.current).clone());
     });
-  }, [manager, nextManager]);
+  }, [manager, initialManager]);
 
   return manager;
 }

packages/@remirror/react/src/react-helpers.tsx

@@ -1,4 +1,9 @@
-import { AnyCombinedUnion, BuiltinPreset, RemirrorManager } from '@remirror/core';
+import {
+  AnyCombinedUnion,
+  BuiltinPreset,
+  isRemirrorManager,
+  RemirrorManager,
+} from '@remirror/core';
 import { CorePreset } from '@remirror/preset-core';
 import { ReactPreset } from '@remirror/preset-react';
 
@@ -8,11 +13,17 @@ import { CreateReactManagerOptions } from './react-types';
  * Create a react manager with all the default react presets and extensions.
  */
 export function createReactManager<Combined extends AnyCombinedUnion>(
-  combined: readonly Combined[],
+  combined:
+    | readonly Combined[]
+    | RemirrorManager<Combined | BuiltinPreset | ReactPreset | CorePreset>,
   options: CreateReactManagerOptions = {},
 ): RemirrorManager<Combined | BuiltinPreset | ReactPreset | CorePreset> {
   const { managerSettings: settings, core, react } = options;
 
+  if (isRemirrorManager<Combined | BuiltinPreset | ReactPreset | CorePreset>(combined)) {
+    return combined;
+  }
+
   return RemirrorManager.create(
     [...combined, new ReactPreset(react), new CorePreset(core)],
     settings,