perf(web/menu): memoize button and header components

Drops the render times for a 9 button menu down from 12ms to 1.6ms
overextended · Oct 29, 2022 · 00465d2 · 00465d2
1 parent 6b8cfa9
commit 00465d2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/web/src/features/menu/list/Header.tsx b/web/src/features/menu/list/Header.tsx
@@ -1,4 +1,5 @@
 import { Box, Text } from '@chakra-ui/react';
+import React from 'react';
 
 const Header: React.FC<{ title: string }> = ({ title }) => {
   return (
@@ -18,4 +19,4 @@ const Header: React.FC<{ title: string }> = ({ title }) => {
   );
 };
 
-export default Header;
+export default React.memo(Header);
diff --git a/web/src/features/menu/list/ListItem.tsx b/web/src/features/menu/list/ListItem.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Stack, Text } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import CustomCheckbox from './CustomCheckbox';
 import type { MenuItem } from './index';
 
@@ -68,4 +68,4 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
   );
 });
 
-export default ListItem;
+export default React.memo(ListItem);