Очистка неиспользуемого и оптимизация

src/component/DualSpreadsheet/DualSpreadsheet.tsx

@@ -2,7 +2,14 @@ import { useMultiSheetEngine } from '@/hook/useMultiSheetEngine'
 import { useSheetAutoSave } from '@/hook/useSheetAutoSave'
 import { getFileData, getLatestFileForTemplate } from '@/service/fileApiService'
 import { produce } from 'immer'
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
 // Импорты из новых модулей
 import { FormulaBar, Spreadsheet } from './components'
@@ -720,6 +727,12 @@ const DualSpreadsheet: FC<DualSpreadsheetProps> = ({
     [templateId]
   )
 
+  // Мемоизируем getAllModifiedCells для предотвращения частых ререндеров хука автосохранения
+  const memoizedGetAllModifiedCells = useCallback(
+    multiSheetEngine.getAllModifiedCells,
+    [multiSheetEngine.getAllModifiedCells]
+  )
+
   // Используем новый хук автосохранения
   const {
     isSaving,
@@ -731,25 +744,12 @@ const DualSpreadsheet: FC<DualSpreadsheetProps> = ({
     loadSavedSheets,
     loadSheets, // Добавляем асинхронную функцию загрузки
   } = useSheetAutoSave(
-    multiSheetEngine.getAllModifiedCells,
+    memoizedGetAllModifiedCells,
     multiSheetEngine.isCalculating,
     revision,
     autoSaveOptions
   )
 
-  // Отладка templateId
-  useEffect(() => {
-    // console.log('🆔 Текущий templateId в DualSpreadsheet:', {
-    //templateId,
-    //type: typeof templateId,
-    //isValid: templateId
-    //  ? /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
-    //      templateId
-    //    )
-    //  : false,
-    //})
-  }, [templateId])
-
   // Используем хук для перетаскивания разделителя
   const handleDividerDrag = useCallback((newLeftPercentage: number) => {
     // Используем requestAnimationFrame для более плавного обновления
@@ -932,42 +932,45 @@ const DualSpreadsheet: FC<DualSpreadsheetProps> = ({
         style={{ transition: 'none' }}
       >
         {SHEET_TYPES.map((sheetType, index) => (
-          <Spreadsheet
-            key={sheetType}
-            sheetType={sheetType}
-            columnWidths={columnWidths[sheetType]}
-            spreadsheetWidths={spreadsheetWidths}
-            getCachedCellData={getCachedCellData}
-            selectedCell={selectedCell}
-            activeSheet={activeSheet}
-            isEditing={isEditing}
-            editingValue={editingValue}
-            highlightedCells={highlightedCells}
-            handleCellClick={handleCellClick}
-            handleCellDoubleClick={handleCellDoubleClick}
-            handleCellChange={handleCellChange}
-            handleCellReferenceClick={handleCellReferenceClick}
-            isInEditMode={isEditing}
-            stopEditing={stopEditing}
-            setActiveSheet={setActiveSheet}
-            activeCellInputRef={activeCellInputRef}
-            containerRefs={containerRefs}
-            handleKeyDown={handleKeyDown}
-            headerRefs={headerRefs}
-            rowHeaderRefs={rowHeaderRefs}
-            gridRefs={gridRefs}
-            onGridScroll={onGridScroll}
-            handleColumnResize={handleColumnResize}
-            mergedCells={mergedCells}
-          />
+          <React.Fragment key={sheetType}>
+            <Spreadsheet
+              sheetType={sheetType}
+              columnWidths={columnWidths[sheetType]}
+              spreadsheetWidths={spreadsheetWidths}
+              getCachedCellData={getCachedCellData}
+              selectedCell={selectedCell}
+              activeSheet={activeSheet}
+              isEditing={isEditing}
+              editingValue={editingValue}
+              highlightedCells={highlightedCells}
+              handleCellClick={handleCellClick}
+              handleCellDoubleClick={handleCellDoubleClick}
+              handleCellChange={handleCellChange}
+              handleCellReferenceClick={handleCellReferenceClick}
+              isInEditMode={isEditing}
+              stopEditing={stopEditing}
+              setActiveSheet={setActiveSheet}
+              activeCellInputRef={activeCellInputRef}
+              containerRefs={containerRefs}
+              handleKeyDown={handleKeyDown}
+              headerRefs={headerRefs}
+              rowHeaderRefs={rowHeaderRefs}
+              gridRefs={gridRefs}
+              onGridScroll={onGridScroll}
+              handleColumnResize={handleColumnResize}
+              mergedCells={mergedCells}
+            />
+            {index === 0 && (
+              <div
+                ref={separatorRef}
+                className="flex w-2 cursor-col-resize items-center justify-center bg-border transition-colors hover:bg-primary/20"
+                style={{ userSelect: 'none' }}
+              >
+                <div className="h-4 w-0.5 rounded-full bg-muted-foreground/50" />
+              </div>
+            )}
+          </React.Fragment>
         ))}
-        <div
-          ref={separatorRef}
-          className="flex w-2 cursor-col-resize items-center justify-center bg-border transition-colors hover:bg-primary/20"
-          style={{ userSelect: 'none' }}
-        >
-          <div className="h-4 w-0.5 rounded-full bg-muted-foreground/50" />
-        </div>
       </div>
     </div>
   )