From 49175329e1aef5ed104b5c01075358972ed70913 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Thu, 14 Dec 2023 10:43:00 +0000 Subject: [PATCH] Add memo to some components (#16094) GitOrigin-RevId: e4bea140d872ac3f8b2aca7833e658af684a1438 --- .../editor-left-menu/components/editor-left-menu.tsx | 6 ++++-- .../js/features/ide-react/components/ide-root.tsx | 4 ++-- .../ide-react/components/modals/generic-message-modal.tsx | 3 ++- .../components/modals/lock-editor-message-modal.tsx | 4 ++-- .../ide-react/components/modals/out-of-sync-modal.tsx | 4 ++-- .../components/review-panel/current-file-container.tsx | 4 ++-- .../review-panel/editor-widgets/editor-widgets.tsx | 4 ++-- .../components/review-panel/overview-container.tsx | 3 ++- .../components/toolbar/table-inserter-dropdown.tsx | 8 +++++--- 9 files changed, 23 insertions(+), 17 deletions(-) diff --git a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx index 6b8bcec5ff..86df6c6de2 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx +++ b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx @@ -3,11 +3,11 @@ import LeftMenuMask from './left-menu-mask' import AccessibleModal from '../../../shared/components/accessible-modal' import { Modal } from 'react-bootstrap' import classNames from 'classnames' -import { lazy, Suspense } from 'react' +import { lazy, memo, Suspense } from 'react' import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner' const EditorLeftMenuBody = lazy(() => import('./editor-left-menu-body')) -export default function EditorLeftMenu() { +function EditorLeftMenu() { const { leftMenuShown, setLeftMenuShown } = useLayoutContext() const closeModal = () => { @@ -36,3 +36,5 @@ export default function EditorLeftMenu() { ) } + +export default memo(EditorLeftMenu) diff --git a/services/web/frontend/js/features/ide-react/components/ide-root.tsx b/services/web/frontend/js/features/ide-react/components/ide-root.tsx index 7e18e43cb6..874f534386 100644 --- a/services/web/frontend/js/features/ide-react/components/ide-root.tsx +++ b/services/web/frontend/js/features/ide-react/components/ide-root.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react' +import { FC, memo, useState } from 'react' import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback' import withErrorBoundary from '@/infrastructure/error-boundary' import IdePage from '@/features/ide-react/components/layout/ide-page' @@ -15,4 +15,4 @@ const IdeRoot: FC = () => { ) } -export default withErrorBoundary(IdeRoot, GenericErrorBoundaryFallback) +export default withErrorBoundary(memo(IdeRoot), GenericErrorBoundaryFallback) diff --git a/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx b/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx index b973d74c04..51f849c4f4 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx +++ b/services/web/frontend/js/features/ide-react/components/modals/generic-message-modal.tsx @@ -1,6 +1,7 @@ import { useTranslation } from 'react-i18next' import { Modal } from 'react-bootstrap' import AccessibleModal from '@/shared/components/accessible-modal' +import { memo } from 'react' export type GenericMessageModalOwnProps = { title: string @@ -34,4 +35,4 @@ function GenericMessageModal({ ) } -export default GenericMessageModal +export default memo(GenericMessageModal) diff --git a/services/web/frontend/js/features/ide-react/components/modals/lock-editor-message-modal.tsx b/services/web/frontend/js/features/ide-react/components/modals/lock-editor-message-modal.tsx index 6dbee9fe72..1d0c0e4860 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/lock-editor-message-modal.tsx +++ b/services/web/frontend/js/features/ide-react/components/modals/lock-editor-message-modal.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'react-i18next' import { Modal } from 'react-bootstrap' import AccessibleModal from '@/shared/components/accessible-modal' -import { useEffect, useState } from 'react' +import { memo, useEffect, useState } from 'react' export type LockEditorMessageModalProps = { delay: number // In seconds @@ -45,4 +45,4 @@ function LockEditorMessageModal({ delay, show }: LockEditorMessageModalProps) { ) } -export default LockEditorMessageModal +export default memo(LockEditorMessageModal) diff --git a/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx b/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx index f009df1c86..b29f2445c3 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx +++ b/services/web/frontend/js/features/ide-react/components/modals/out-of-sync-modal.tsx @@ -1,7 +1,7 @@ import { Trans, useTranslation } from 'react-i18next' import { Button, Modal } from 'react-bootstrap' import AccessibleModal from '@/shared/components/accessible-modal' -import { useState } from 'react' +import { memo, useState } from 'react' import { useLocation } from '@/shared/hooks/use-location' export type OutOfSyncModalProps = { @@ -78,4 +78,4 @@ function OutOfSyncModal({ editorContent, show, onHide }: OutOfSyncModalProps) { ) } -export default OutOfSyncModal +export default memo(OutOfSyncModal) diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx index 5153db39c6..45f4c6d0e9 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { memo, useMemo } from 'react' import Container from './container' import Toolbar from './toolbar/toolbar' import Nav from './nav' @@ -151,4 +151,4 @@ function CurrentFileContainer() { ) } -export default CurrentFileContainer +export default memo(CurrentFileContainer) diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx index 0894871276..55532e8a8c 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/editor-widgets.tsx @@ -14,7 +14,7 @@ import Modal, { useBulkActionsModal } from '../entries/bulk-actions-entry/modal' import getMeta from '../../../../../utils/meta' import useScopeValue from '../../../../../shared/hooks/use-scope-value' import useScopeEventListener from '@/shared/hooks/use-scope-event-listener' -import { useCallback } from 'react' +import { memo, useCallback } from 'react' function EditorWidgets() { const { t } = useTranslation() @@ -109,4 +109,4 @@ function EditorWidgets() { ) } -export default EditorWidgets +export default memo(EditorWidgets) diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx index eab057f1e0..63bdbda29f 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx @@ -7,6 +7,7 @@ import OverviewFile from './overview-file' import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context' import { useFileTreeData } from '@/shared/context/file-tree-data-context' import { MainDocument } from '../../../../../../types/project-settings' +import { memo } from 'react' function OverviewContainer() { const { isOverviewLoading } = useReviewPanelValueContext() @@ -42,4 +43,4 @@ function OverviewContainer() { ) } -export default OverviewContainer +export default memo(OverviewContainer) diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx index 1a6e8f7812..85cb4fa549 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useRef, useState } from 'react' +import { FC, memo, useCallback, useRef, useState } from 'react' import * as commands from '../../extensions/toolbar/commands' import { useTranslation } from 'react-i18next' import useDropdown from '../../../../shared/hooks/use-dropdown' @@ -9,7 +9,7 @@ import MaterialIcon from '../../../../shared/components/material-icon' import classNames from 'classnames' import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics' -export const TableInserterDropdown: FC = () => { +export const TableInserterDropdown = memo(() => { const { t } = useTranslation() const { open, onToggle, ref } = useDropdown() const view = useCodeMirrorViewContext() @@ -69,7 +69,9 @@ export const TableInserterDropdown: FC = () => { ) -} +}) +TableInserterDropdown.displayName = 'TableInserterDropdown' + const range = (start: number, end: number) => Array.from({ length: end - start + 1 }, (v, k) => k + start)