perf: memoize TNodeRenderer

Avoid re-renders of children of interative / dynamic custom renderers.
meliorence · Jun 24, 2021 · 164f205 · 164f205
1 parent 7b01da7
commit 164f205
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/packages/render-html/src/TNodeRenderer.tsx b/packages/render-html/src/TNodeRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { memo, ReactElement } from 'react';
 import TBlockRenderer from './TBlockRenderer';
 import TPhrasingRenderer from './TPhrasingRenderer';
 import TTextRenderer from './TTextRenderer';
@@ -10,7 +10,9 @@ export type { TNodeRendererProps } from './shared-types';
 /**
  * A component to render any {@link TNode}.
  */
-function TNodeRenderer(props: TNodeRendererProps<any>): ReactElement | null {
+const TNodeRenderer = memo(function MemoizedTNodeRenderer(
+  props: TNodeRendererProps<any>
+): ReactElement | null {
   const { tnode } = props;
   const sharedProps = useSharedProps();
   const tnodeProps = {
@@ -40,7 +42,7 @@ function TNodeRenderer(props: TNodeRendererProps<any>): ReactElement | null {
     }
   }
   return null;
-}
+});
 
 const defaultProps: Required<Pick<TNodeRendererProps<any>, 'propsFromParent'>> =
   {
@@ -49,9 +51,7 @@ const defaultProps: Required<Pick<TNodeRendererProps<any>, 'propsFromParent'>> =
     }
   };
 
-/**
- * @ignore
- */
+/* @ts-ignore*/
 TNodeRenderer.defaultProps = defaultProps;
 
 export default TNodeRenderer;
diff --git a/packages/render-html/src/hooks/useAssembledCommonProps.ts b/packages/render-html/src/hooks/useAssembledCommonProps.ts
@@ -29,7 +29,7 @@ export default function useAssembledCommonProps<T extends TNode>(
     sharedProps,
     TDefaultRenderer: TDefault,
     style: mergeCollapsedMargins(
-      propsFromParent.collapsedMarginTop,
+      propsFromParent?.collapsedMarginTop!,
       tnode.getNativeStyles()
     ) as any,
     type: tnode.type === 'text' || tnode.type === 'phrasing' ? 'text' : 'block',

diff --git a/packages/render-html/src/shared-types.ts b/packages/render-html/src/shared-types.ts
@@ -819,7 +819,7 @@ export interface TNodeRendererProps<T extends TNode> {
   /**
    * Props passed by direct parents.
    */
-  propsFromParent: PropsFromParent;
+  propsFromParent?: PropsFromParent;
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -819,7 +819,7 @@ export interface TNodeRendererProps<T extends TNode> { @@
       /**
        * Props passed by direct parents.
        */
-      propsFromParent: PropsFromParent;
+      propsFromParent?: PropsFromParent;
     }
     /**
@@ Expand Down @@