refactor to fix perf warns

Author: stipsan

.oxlintrc.json

@@ -11,6 +11,7 @@
     "no-console": "error",
     "no-array-sort": "off",
     "rules-of-hooks": "error",
+    "react/jsx-key": "error",
     "react-in-jsx-scope": "off",
     // @TODO these rules should be enabled, and the violations fixed
     "no-unsafe-type-assertion": "off"

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 {
@@ -71,23 +71,59 @@ function getNodeRenderer (
     const key = node._key || `node-${index}`
 
     if (isPortableTextToolkitList(node)) {
-      return renderList(node, index, key)
+      return (
+        <RenderList
+          key={key}
+          renderNode={renderNode}
+          components={components}
+          handleMissingComponent={handleMissingComponent}
+          node={node}
+          index={index}
+        />
+      )
     }
 
     if (isPortableTextListItemBlock(node)) {
-      return renderListItem(node, index, key)
+      return (
+        <RenderListItem
+          key={key}
+          renderNode={renderNode}
+          components={components}
+          handleMissingComponent={handleMissingComponent}
+          node={node}
+          index={index}
+        />
+      )
     }
 
     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)) {
@@ -101,123 +137,6 @@ function getNodeRenderer (
     return node._type in components.types
   }
 
-  function renderListItem(node: PortableTextListItemBlock, index: number, key: string) {
-    const tree = serializeBlock({node, index, isInline: false, renderNode})
-    const renderer = components.listItem
-    const handler = typeof renderer === 'function' ? renderer : renderer[node.listItem]
-    const Li = handler || components.unknownListItem
-
-    if (Li === components.unknownListItem) {
-      const style = node.listItem || 'bullet'
-      handleMissingComponent(unknownListItemStyleWarning(style), {
-        type: style,
-        nodeType: 'listItemStyle',
-      })
-    }
-
-    let children = tree.children
-    if (node.style && node.style !== 'normal') {
-      // Wrap any other style in whatever the block serializer says to use
-      const {listItem: _listItem, ...blockNode} = node
-      children = renderNode({
-        node: blockNode,
-        index,
-        isInline: false,
-        renderNode,
-      })
-    }
-
-    return (
-      <Li key={key} value={node} index={index} isInline={false} renderNode={renderNode}>
-        {children}
-      </Li>
-    )
-  }
-
-  function renderList(node: ReactPortableTextList, index: number, key: string) {
-    const children = node.children.map((child, childIndex) =>
-      renderNode({
-        node: child._key ? child : {...child, _key: `li-${index}-${childIndex}`},
-        index: childIndex,
-        isInline: false,
-        renderNode,
-      }),
-    )
-
-    const component = components.list
-    const handler = typeof component === 'function' ? component : component[node.listItem]
-    const List = handler || components.unknownList
-
-    if (List === components.unknownList) {
-      const style = node.listItem || 'bullet'
-      handleMissingComponent(unknownListStyleWarning(style), {
-        nodeType: 'listStyle',
-        type: style,
-      })
-    }
-
-    return (
-      <List key={key} value={node} index={index} isInline={false} renderNode={renderNode}>
-        {children}
-      </List>
-    )
-  }
-
-  function renderSpan(node: ToolkitNestedPortableTextSpan, _index: number, key: string) {
-    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
-        key={key}
-        text={spanToPlainText(node)}
-        value={markDef}
-        markType={markType}
-        markKey={markKey}
-        renderNode={renderNode}
-      >
-        {children}
-      </Span>
-    )
-  }
-
-  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 +178,170 @@ function getNodeRenderer (
   return renderNode
 }
 
+function RenderList({
+  renderNode,
+  components,
+  handleMissingComponent,
+  node,
+  index,
+}: {
+  renderNode: NodeRenderer
+  components: PortableTextReactComponents
+  handleMissingComponent: MissingComponentHandler
+  node: ReactPortableTextList
+  index: number
+}) {
+  const children = node.children.map((child, childIndex) =>
+    renderNode({
+      node: child._key ? child : {...child, _key: `li-${index}-${childIndex}`},
+      index: childIndex,
+      isInline: false,
+      renderNode,
+    }),
+  )
+
+  const component = components.list
+  const handler = typeof component === 'function' ? component : component[node.listItem]
+  const List = handler || components.unknownList
+
+  if (List === components.unknownList) {
+    const style = node.listItem || 'bullet'
+    handleMissingComponent(unknownListStyleWarning(style), {
+      nodeType: 'listStyle',
+      type: style,
+    })
+  }
+
+  return (
+    <List value={node} index={index} isInline={false} renderNode={renderNode}>
+      {children}
+    </List>
+  )
+}
+
+function RenderListItem({
+  renderNode,
+  components,
+  handleMissingComponent,
+  node,
+  index,
+}: {
+  components: PortableTextReactComponents
+  handleMissingComponent: MissingComponentHandler
+  renderNode: NodeRenderer
+  node: PortableTextListItemBlock
+  index: number
+}) {
+  const tree = serializeBlock({node, index, isInline: false, renderNode})
+  const renderer = components.listItem
+  const handler = typeof renderer === 'function' ? renderer : renderer[node.listItem]
+  const Li = handler || components.unknownListItem
+
+  if (Li === components.unknownListItem) {
+    const style = node.listItem || 'bullet'
+    handleMissingComponent(unknownListItemStyleWarning(style), {
+      type: style,
+      nodeType: 'listItemStyle',
+    })
+  }
+
+  let children = tree.children
+  if (node.style && node.style !== 'normal') {
+    // Wrap any other style in whatever the block serializer says to use
+    const {listItem: _listItem, ...blockNode} = node
+    children = renderNode({
+      node: blockNode,
+      index,
+      isInline: false,
+      renderNode,
+    })
+  }
+
+  return (
+    <Li value={node} index={index} isInline={false} renderNode={renderNode}>
+      {children}
+    </Li>
+  )
+}
+
+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 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 serializeBlock(options: Serializable<PortableTextBlock>): SerializedBlock {
   const {node, index, isInline, renderNode} = options
   const tree = buildMarksTree(node)