fix: block list memoization

hirosystems · Dec 30, 2023 · 20d2488 · 20d2488
1 parent ba48bc8
commit 20d2488
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 87 deletions.
diff --git a/src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx b/src/app/_components/BlockList/AnimatedBlockAndMicroblocksItem.tsx
@@ -15,46 +15,41 @@ export const animationDuration = 0.8;
 export const AnimatedBlockAndMicroblocksItem: FC<{
   block: EnhancedBlock;
   onAnimationExit?: () => void;
-}> = memo(
-  ({ block, onAnimationExit }) => {
-    const [show, setShow] = useState(!block.animate);
-    useEffect(() => {
-      if (block.animate) {
-        setTimeout(() => {
-          setShow(true);
-        }, 100);
-      }
-    }, [block.animate]);
-    useEffect(() => {
-      if (block.destroy) {
-        setShow(false);
-      }
-    }, [block.destroy]);
+}> = ({ block, onAnimationExit }) => {
+  const [show, setShow] = useState(!block.animate);
+  useEffect(() => {
+    if (block.animate) {
+      setTimeout(() => {
+        setShow(true);
+      }, 100);
+    }
+  }, [block.animate]);
+  useEffect(() => {
+    if (block.destroy) {
+      setShow(false);
+    }
+  }, [block.destroy]);
 
-    return (
-      <>
-        <Box borderBottom={'1px'} _last={{ borderBottom: 'none' }}>
-          <Collapse
-            in={show}
-            animateOpacity
-            transition={{
-              enter: { duration: animationDuration },
-              exit: { duration: animationDuration },
-            }}
-            onAnimationComplete={state => {
-              if (state === 'exit') {
-                onAnimationExit?.();
-              }
-            }}
-            data-testid={`block-item-${block.hash}`}
-          >
-            <BlockAndMicroblocksItem block={block} />
-          </Collapse>
-        </Box>
-      </>
-    );
-  },
-  (prevProps, currentProps) =>
-    prevProps.block.hash === currentProps.block.hash &&
-    prevProps.block.destroy === currentProps.block.destroy
-);
+  return (
+    <>
+      <Box borderBottom={'1px'} _last={{ borderBottom: 'none' }}>
+        <Collapse
+          in={show}
+          animateOpacity
+          transition={{
+            enter: { duration: animationDuration },
+            exit: { duration: animationDuration },
+          }}
+          onAnimationComplete={state => {
+            if (state === 'exit') {
+              onAnimationExit?.();
+            }
+          }}
+          data-testid={`block-item-${block.hash}`}
+        >
+          <BlockAndMicroblocksItem block={block} />
+        </Collapse>
+      </Box>
+    </>
+  );
+};
diff --git a/src/app/_components/BlockList/BlockAndMicroblocksItem.tsx b/src/app/_components/BlockList/BlockAndMicroblocksItem.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 
 import { Block } from '@stacks/stacks-blockchain-api-types';
 
@@ -11,45 +11,42 @@ import { Text } from '../../../ui/Text';
 import { BlockListItem } from './BlockListItem';
 import { MicroblockListItem } from './MicroblockListItem';
 
-export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = memo(
-  ({ block }) => {
-    return (
-      <AccordionItem
-        border={'none'}
-        borderBottom={'1px solid var(--stacks-colors-border)'}
-        _last={{ border: 'none' }}
-      >
-        <Flex gap={'6px'}>
-          <BlockListItem block={block} data-test={`block-${block.hash}`} />
-          <AccordionButton
-            flexGrow={0}
-            flexShrink={0}
-            width={'30px'}
-            ml={'auto'}
-            p={0}
-            justifyContent={'center'}
-          >
-            <AccordionIcon />
-          </AccordionButton>
-        </Flex>
-        <AccordionPanel p={'0 30px 0 0'}>
-          {!!block.microblocks_accepted?.length ? (
-            block.microblocks_accepted.map((microblockHash, microblockIndex) => (
-              <MicroblockListItem
-                blockTime={block.burn_block_time}
-                hash={microblockHash}
-                index={microblockIndex}
-                key={microblockHash}
-              />
-            ))
-          ) : (
-            <Text fontSize={'14px'} p={'20px'} align={'center'}>
-              No Microblocks
-            </Text>
-          )}
-        </AccordionPanel>
-      </AccordionItem>
-    );
-  },
-  (prevProps, currentProps) => prevProps.block.hash === currentProps.block.hash
-);
+export const BlockAndMicroblocksItem: React.FC<{ block: Block }> = ({ block }) => {
+  return (
+    <AccordionItem
+      border={'none'}
+      borderBottom={'1px solid var(--stacks-colors-border)'}
+      _last={{ border: 'none' }}
+    >
+      <Flex gap={'6px'}>
+        <BlockListItem block={block} data-test={`block-${block.hash}`} />
+        <AccordionButton
+          flexGrow={0}
+          flexShrink={0}
+          width={'30px'}
+          ml={'auto'}
+          p={0}
+          justifyContent={'center'}
+        >
+          <AccordionIcon />
+        </AccordionButton>
+      </Flex>
+      <AccordionPanel p={'0 30px 0 0'}>
+        {!!block.microblocks_accepted?.length ? (
+          block.microblocks_accepted.map((microblockHash, microblockIndex) => (
+            <MicroblockListItem
+              blockTime={block.burn_block_time}
+              hash={microblockHash}
+              index={microblockIndex}
+              key={microblockHash}
+            />
+          ))
+        ) : (
+          <Text fontSize={'14px'} p={'20px'} align={'center'}>
+            No Microblocks
+          </Text>
+        )}
+      </AccordionPanel>
+    </AccordionItem>
+  );
+};
diff --git a/src/app/sandbox/Wrapper.tsx b/src/app/sandbox/Wrapper.tsx
@@ -16,14 +16,12 @@ import { Grid } from '../../ui/Grid';
 import { HStack } from '../../ui/HStack';
 import { Icon } from '../../ui/Icon';
 import { IconButton } from '../../ui/IconButton';
-import { useColorMode } from '../../ui/hooks/useColorMode';
 import { Caption } from '../../ui/typography';
 import { PageTitle } from '../_components/PageTitle';
 import { useUser } from './hooks/useUser';
 import { ConnectToStacks } from './layout/ConnectToStacks';
 import { RightPanelSkeleton } from './layout/RightPanelSkeleton';
 import { SideNav } from './layout/SideNav';
-import Loading from './loading';
 import { selectShowRightPanel, setUserData, toggleRightPanel } from './sandbox-slice';
 
 const RightPanel = dynamic(() => import('./layout/RightPanel').then(mod => mod.RightPanel), {