Add memo to some components (#16094)

GitOrigin-RevId: e4bea140d872ac3f8b2aca7833e658af684a1438

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)

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)

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)

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)

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)

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)

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)

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)

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 = () => {
       </Overlay>
     </>
   )
-}
+})
+TableInserterDropdown.displayName = 'TableInserterDropdown'
+
 const range = (start: number, end: number) =>
   Array.from({ length: end - start + 1 }, (v, k) => k + start)