perf(blockcontainer): memo blocks inside of container to reduce rende…

…rings

packages/jaen-pages/src/containers/blocks/BlockItem.tsx

@@ -0,0 +1,30 @@
+import {SFBWrapper} from '@snek-at/jaen-shared-ui'
+import BlockProvider from '@src/contexts/block'
+import {JaenBlock} from '@src/types'
+import isEqual from 'lodash/isEqual'
+import * as React from 'react'
+
+type BlockItemProps = {
+  // block props
+  containerName: string
+  position: number
+  blockName: string
+  // other props
+  BlockComponent: JaenBlock
+  isEditing: boolean
+  onDelete: (position: number) => void
+}
+
+const BlockItem = React.memo<BlockItemProps>(
+  ({children, BlockComponent, isEditing, onDelete, ...blockProps}) => {
+    return (
+      <BlockProvider {...blockProps}>
+        <SFBWrapper onDeleteClick={() => onDelete(blockProps.position)}>
+          <BlockComponent />
+        </SFBWrapper>
+      </BlockProvider>
+    )
+  }
+)
+
+export default BlockItem

packages/jaen-pages/src/containers/blocks/Container.tsx

@@ -24,6 +24,8 @@ import {withRedux} from '@store/withRedux'
 import React, {useEffect, useState, useRef, useMemo} from 'react'
 import {useCallback} from 'react'
 
+import BlockItem from './BlockItem'
+
 type BlockContainerProps = {
   name: string
   displayName: string
@@ -39,6 +41,8 @@ const BlockContainer: React.FC<BlockContainerProps> = ({
 }) => {
   const dispatch = useAppDispatch()
 
+  console.log('RERENDER container')
+
   const {jaenPageContext} = useTemplate()
   const pageId = jaenPageContext.id
 
@@ -153,38 +157,28 @@ const BlockContainer: React.FC<BlockContainerProps> = ({
     typeName: string
   ): JaenBlock | undefined => blocks.find(b => b.BlockName === typeName)
 
-  const renderedBlocks = visibleBlocksKeys.map(position => {
+  const renderedBlocks = visibleBlocksKeys.map((position, key) => {
     const BlockComponent = getBlockComponentByTypeName(
       allBlocks?.[position].typeName
     )
 
     const numPosition = parseInt(position)
 
     if (BlockComponent) {
-      const block = (
-        <BlockProvider
-          key={position}
+      return (
+        <BlockItem
+          key={numPosition}
           containerName={name}
           position={numPosition}
-          blockName={BlockComponent.BlockName}>
-          {!isEditing ? <BlockComponent /> : <BlockComponent />}
-        </BlockProvider>
+          blockName={BlockComponent.BlockName}
+          BlockComponent={BlockComponent}
+          isEditing={isEditing}
+          onDelete={deleteBlock}
+        />
       )
-
-      if (isEditing) {
-        return (
-          <SFBWrapper onDeleteClick={() => deleteBlock(numPosition)}>
-            {block}
-          </SFBWrapper>
-        )
-      }
-
-      return block
     }
   })
 
-  console.log('ADJAKDAJKD', React.Children.toArray(renderedBlocks))
-
   if (isEditing) {
     return (
       <SFWrapper ref={ref} displayName={displayName} blockTypes={blocksTypes}>