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

Drops the render times for a 9 button menu down from 12ms to 1.6ms
This commit is contained in:
Luke
2022-10-29 16:15:58 +02:00
parent 6b8cfa990f
commit 00465d2e7a
2 changed files with 4 additions and 3 deletions

View File

@@ -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);

View File

@@ -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);