refactor: optimize context value creation and useCallback in hooks (#1820)

Author: justsml

packages/react/src/editor/BlockNoteView.tsx

@@ -152,7 +152,26 @@ function BlockNoteViewComponent<
 
   // We set defaultUIProps and editorProps on a different context, the BlockNoteViewContext.
   // This BlockNoteViewContext is used to render the editor and the default UI.
-  const defaultUIProps = {
+  const blockNoteViewContextValue = useMemo(() => {
+    return {
+      editorProps: {
+        autoFocus,
+        contentEditableProps,
+      },
+      defaultUIProps: {
+        formattingToolbar,
+        linkToolbar,
+        slashMenu,
+        emojiPicker,
+        sideMenu,
+        filePanel,
+        tableHandles,
+        comments,
+      },
+    };
+  }, [
+    autoFocus,
+    contentEditableProps,
     formattingToolbar,
     linkToolbar,
     slashMenu,
@@ -161,21 +180,11 @@ function BlockNoteViewComponent<
     filePanel,
     tableHandles,
     comments,
-  };
-
-  const editorProps = {
-    autoFocus,
-    contentEditableProps,
-  };
+  ]);
 
   return (
     <BlockNoteContext.Provider value={blockNoteContext}>
-      <BlockNoteViewContext.Provider
-        value={{
-          editorProps,
-          defaultUIProps,
-        }}
-      >
+      <BlockNoteViewContext.Provider value={blockNoteViewContextValue}>
         <ElementRenderer ref={setElementRenderer} />
         <BlockNoteViewContainer
           className={className}

packages/react/src/hooks/useActiveStyles.ts

@@ -1,6 +1,6 @@
 import { BlockNoteEditor, StyleSchema } from "@blocknote/core";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
 import { useEditorChange } from "./useEditorChange.js";
 import { useEditorSelectionChange } from "./useEditorSelectionChange.js";
@@ -23,15 +23,15 @@ export function useActiveStyles<T extends StyleSchema>(
 
   const [styles, setStyles] = useState(() => e.getActiveStyles());
 
-  // Updates state on editor content change.
-  useEditorChange(() => {
+  const updateStyles = useCallback(() => {
     setStyles(e.getActiveStyles());
-  }, e);
+  }, [e]);
+
+  // Updates state on editor content change.
+  useEditorChange(updateStyles, e);
 
   // Updates state on selection change.
-  useEditorSelectionChange(() => {
-    setStyles(e.getActiveStyles());
-  }, e);
+  useEditorSelectionChange(updateStyles, e);
 
   return styles;
 }

packages/react/src/hooks/useSelectedBlocks.ts

@@ -5,7 +5,7 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
 import { useEditorContentOrSelectionChange } from "./useEditorContentOrSelectionChange.js";
 
@@ -31,13 +31,15 @@ export function useSelectedBlocks<
     Block<BSchema, ISchema, SSchema>[]
   >(() => e.getSelection()?.blocks || [e.getTextCursorPosition().block]);
 
-  useEditorContentOrSelectionChange(
+  const updateSelectedBlocks = useCallback(
     () =>
       setSelectedBlocks(
         e.getSelection()?.blocks || [e.getTextCursorPosition().block],
       ),
-    e,
+    [e],
   );
 
+  useEditorContentOrSelectionChange(updateSelectedBlocks, e);
+
   return selectedBlocks;
 }