refactor to fix perf warns

Author: stipsan

src/react-portable-text.tsx

@@ -62,7 +62,7 @@ export function PortableText<B extends TypedObject = PortableTextBlock>({
   return <>{rendered}</>
 }
 
-function getNodeRenderer (
+function getNodeRenderer(
   components: PortableTextReactComponents,
   handleMissingComponent: MissingComponentHandler,
 ): NodeRenderer {
@@ -79,15 +79,15 @@ function getNodeRenderer (
     }
 
     if (isPortableTextToolkitSpan(node)) {
-      return renderSpan(node, index, key)
+      return <RenderSpan key={key} renderNode={renderNode} components={components} handleMissingComponent={handleMissingComponent} node={node} />
     }
 
     if (hasCustomComponentForNode(node)) {
       return renderCustomBlock(node, index, key, isInline)
     }
 
     if (isPortableTextBlock(node)) {
-      return renderBlock(node, index, key, isInline)
+      return <RenderBlock key={key} renderNode={renderNode} components={components} handleMissingComponent={handleMissingComponent} node={node} index={index} isInline={isInline} />
     }
 
     if (isPortableTextToolkitTextNode(node)) {
@@ -196,28 +196,6 @@ function getNodeRenderer (
     )
   }
 
-  function renderBlock(node: PortableTextBlock, index: number, key: string, isInline: boolean) {
-    const {_key, ...props} = serializeBlock({
-      node,
-      index,
-      isInline,
-      renderNode,
-    })
-    const style = props.node.style || 'normal'
-    const handler =
-      typeof components.block === 'function' ? components.block : components.block[style]
-    const Block = handler || components.unknownBlockStyle
-
-    if (Block === components.unknownBlockStyle) {
-      handleMissingComponent(unknownBlockStyleWarning(style), {
-        nodeType: 'blockStyle',
-        type: style,
-      })
-    }
-
-    return <Block key={key} {...props} value={props.node} renderNode={renderNode} />
-  }
-
   function renderText(node: ToolkitTextNode, key: string) {
     if (node.text === '\n') {
       const HardBreak = components.hardBreak
@@ -259,6 +237,86 @@ function getNodeRenderer (
   return renderNode
 }
 
+
+
+function RenderBlock({
+  renderNode,
+  components,
+  handleMissingComponent,
+  node,
+  index,
+  isInline,
+}: {
+  renderNode: NodeRenderer
+  components: PortableTextReactComponents
+  handleMissingComponent: MissingComponentHandler
+  node: PortableTextBlock
+  index: number
+  isInline: boolean
+}) {
+  const {_key, ...props} = serializeBlock({
+    node,
+    index,
+    isInline,
+    renderNode,
+  })
+  const style = props.node.style || 'normal'
+  const handler =
+    typeof components.block === 'function' ? components.block : components.block[style]
+  const Block = handler || components.unknownBlockStyle
+
+  if (Block === components.unknownBlockStyle) {
+    handleMissingComponent(unknownBlockStyleWarning(style), {
+      nodeType: 'blockStyle',
+      type: style,
+    })
+  }
+
+  return <Block {...props} value={props.node} renderNode={renderNode} />
+}
+
+function RenderSpan({
+  renderNode,
+  components,
+  handleMissingComponent,
+  node,
+}: {
+  renderNode: NodeRenderer
+  components: PortableTextReactComponents
+  handleMissingComponent: MissingComponentHandler
+  node: ToolkitNestedPortableTextSpan
+}) {
+  const {markDef, markType, markKey} = node
+    const Span = components.marks[markType] || components.unknownMark
+    const children = node.children.map((child, childIndex) =>
+      renderNode({
+        node: child,
+        index: childIndex,
+        isInline: true,
+        renderNode,
+      }),
+    )
+
+    if (Span === components.unknownMark) {
+      handleMissingComponent(unknownMarkWarning(markType), {
+        nodeType: 'mark',
+        type: markType,
+      })
+    }
+
+    return (
+      <Span
+        text={spanToPlainText(node)}
+        value={markDef}
+        markType={markType}
+        markKey={markKey}
+        renderNode={renderNode}
+      >
+        {children}
+      </Span>
+    )
+}
+
 function serializeBlock(options: Serializable<PortableTextBlock>): SerializedBlock {
   const {node, index, isInline, renderNode} = options
   const tree = buildMarksTree(node)