From d825fe113e78de0442763c1d1604c3503a711bdc Mon Sep 17 00:00:00 2001 From: juniusfree <8164667+juniusfree@users.noreply.github.com> Date: Mon, 8 Apr 2024 16:57:45 +0800 Subject: [PATCH] Use memo --- .../ComponentOptionsModal.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx index 4e8b5112b..e4c08974b 100644 --- a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx +++ b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx @@ -2,6 +2,7 @@ import { Button, Grid, Stack, Typography, useTheme } from "@mui/material"; import { COMPONENT_CATEGORIES } from "components/AddFormEntity/constants"; import SafeImage from "components/SafeImage"; import Modal from "components/Shared/Modal"; +import { useMemo } from "react"; import { CategoryTitle, ColumnContainer, OptionButton, OptionButtonLabel, OptionsColumnContainer } from "./styles"; const chooseIcon = (icon, category) => { @@ -49,20 +50,24 @@ const OptionsColumn = ({ colOptions, options, onClick, onClose, showBorder }) => }; const ComponentOptionsModal = ({ open, onClose, onClick, options }) => { - const groupedOptionsByCategory = options.reduce((acc, option) => { - if (!acc[option.category]) { - acc[option.category] = []; - } - acc[option.category].push(option); - return acc; - }, {}); + const { groupedOptionsByCategory, hasCustomComponent } = useMemo( + () => ({ + groupedOptionsByCategory: options.reduce((acc, option) => { + if (!acc[option.category]) { + acc[option.category] = []; + } + acc[option.category].push(option); + return acc; + }, {}), + hasCustomComponent: options.some((option) => option.category === COMPONENT_CATEGORIES.CUSTOM), + }), + [options] + ); const leftColOptions = [COMPONENT_CATEGORIES.ACTION, COMPONENT_CATEGORIES.TWITTER]; const midColOptions = [COMPONENT_CATEGORIES.DISCORD, COMPONENT_CATEGORIES.YOUTUBE, COMPONENT_CATEGORIES.CRYPTO]; const rightColOptions = [COMPONENT_CATEGORIES.CUSTOM]; - const hasCustomComponent = options.some((option) => option.category === COMPONENT_CATEGORIES.CUSTOM); - return (