From 00465d2e7ad7fc5f5b53282b1e9c4b722b093246 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sat, 29 Oct 2022 16:15:58 +0200
Subject: [PATCH] perf(web/menu): memoize button and header components

Drops the render times for a 9 button menu down from 12ms to 1.6ms
---
 web/src/features/menu/list/Header.tsx   | 3 ++-
 web/src/features/menu/list/ListItem.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/features/menu/list/Header.tsx b/web/src/features/menu/list/Header.tsx
index 6d7af47..7a3ca1a 100644
--- 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
index 847aa81..26846b2 100644
--- 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);