From 266db4933a47aa12a201e4e72790f84090668c2f Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Tue, 30 Apr 2024 16:06:25 +0300 Subject: [PATCH] Optimize performance through memoization --- .../DlgConstituentaTemplate.tsx | 39 ++++++++++----- .../DlgEditVersions/DlgEditVersions.tsx | 21 ++++++--- .../DlgInlineSynthesis/DlgInlineSynthesis.tsx | 47 ++++++++++--------- .../src/pages/LibraryPage/LibraryPage.tsx | 17 +++++-- .../EditorRSExpression/EditorRSExpression.tsx | 19 +++++--- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 39 ++++++++++----- .../ViewConstituents/ViewConstituents.tsx | 23 +++++---- 7 files changed, 131 insertions(+), 74 deletions(-) diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx index 4cedba52..78620078 100644 --- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx +++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx @@ -1,7 +1,7 @@ 'use client'; import clsx from 'clsx'; -import { useLayoutEffect, useState } from 'react'; +import { useLayoutEffect, useMemo, useState } from 'react'; import { TabList, TabPanel, Tabs } from 'react-tabs'; import BadgeHelp from '@/components/man/BadgeHelp'; @@ -100,6 +100,28 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }: }); }, [substitutes.arguments, template.prototype, updateConstituenta, updateSubstitutes]); + const templatePanel = useMemo( + () => , + [template, updateTemplate] + ); + + const argumentsPanel = useMemo( + () => , + [schema, substitutes, updateSubstitutes] + ); + + const editorPanel = useMemo( + () => ( + + ), + [constituenta, updateConstituenta, schema] + ); + return ( - - - + {templatePanel} - - - + {argumentsPanel} - + {editorPanel} diff --git a/rsconcept/frontend/src/dialogs/DlgEditVersions/DlgEditVersions.tsx b/rsconcept/frontend/src/dialogs/DlgEditVersions/DlgEditVersions.tsx index fbef8a90..f7f1d998 100644 --- a/rsconcept/frontend/src/dialogs/DlgEditVersions/DlgEditVersions.tsx +++ b/rsconcept/frontend/src/dialogs/DlgEditVersions/DlgEditVersions.tsx @@ -64,13 +64,8 @@ function DlgEditVersions({ hideWindow, versions, onDelete, onUpdate }: DlgEditVe setDescription(selected?.description ?? ''); }, [selected]); - return ( - + const versionsTable = useMemo( + () => ( setSelected(versions.find(ver => ver.id === versionID))} selected={selected?.id} /> + ), + [processing, versions, onDelete, selected?.id] + ); + + return ( + + {versionsTable}
, [donorID]); + const itemsPanel = useMemo( + () => ( + + ), + [source.schema, source.loading, selected] + ); + const substitutesPanel = useMemo( + () => ( + + ), + [source.schema, source.loading, receiver, selected, substitutions] + ); + return ( - - - - - - - - - - - + {schemaPanel} + {itemsPanel} + {substitutesPanel} ); diff --git a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx index 0e20de39..52d463e1 100644 --- a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx +++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useCallback, useLayoutEffect, useState } from 'react'; +import { useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { urls } from '@/app/urls'; import DataLoader from '@/components/wrap/DataLoader'; @@ -61,6 +61,16 @@ function LibraryPage() { setFilter({}); }, []); + const view = useMemo( + () => ( + + ), + [resetQuery, items] + ); + return ( - + {view} ); } diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx index 4f1bcc4c..b1227521 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx @@ -2,7 +2,7 @@ import { ReactCodeMirrorRef } from '@uiw/react-codemirror'; import { AnimatePresence } from 'framer-motion'; -import { useCallback, useLayoutEffect, useRef, useState } from 'react'; +import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { FaRegKeyboard } from 'react-icons/fa6'; import { toast } from 'react-toastify'; @@ -152,6 +152,17 @@ function EditorRSExpression({ setMathFont(mathFont === 'math' ? 'math2' : 'math'); } + const controls = useMemo( + () => ( + + ), + [showControls, disabled, model.processing, handleEdit] + ); + return (
@@ -208,11 +219,7 @@ function EditorRSExpression({ {...restProps} /> - + {controls} 0} diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx index 3bfc9e36..8532087b 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx @@ -164,6 +164,30 @@ function RSTabs() { const panelHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]); + const cardPanel = useMemo( + () => ( + + ), + [isModified, onDestroySchema] + ); + + const listPanel = useMemo(() => , [onOpenCst]); + const editorPanel = useMemo( + () => ( + + ), + [isModified, setIsModified, activeCst, onOpenCst] + ); + return ( - + {cardPanel} - + {listPanel} - + {editorPanel} diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx index 539369ab..f516cafa 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx @@ -2,7 +2,7 @@ import clsx from 'clsx'; import { motion } from 'framer-motion'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { useConceptOptions } from '@/context/OptionsContext'; import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform'; @@ -27,6 +27,19 @@ function ViewConstituents({ expression, schema, activeID, isBottom, onOpenEdit } const [filteredData, setFilteredData] = useState(schema?.items ?? []); + const table = useMemo( + () => ( + + ), + [isBottom, filteredData, activeID, onOpenEdit, calculateHeight] + ); + return ( - + {table} ); }