Improve performance

Author: rassvet-ii

components/calculationInput/equipments/inventory/AddToInventoryDialog.tsx

@@ -1,12 +1,11 @@
 import styles from './AddToInventoryDialog.module.scss';
 import {Button, Dialog, DialogActions, DialogContent, DialogTitle, useMediaQuery, useTheme} from '@mui/material';
-import React, {useEffect, useMemo} from 'react';
+import React, {useEffect, useMemo, useReducer} from 'react';
 import {useTranslation} from 'next-i18next';
 import {useForm} from 'react-hook-form';
 import {DropPieceIdWithProbAndCount, EquipmentsById} from 'components/calculationInput/PiecesCalculationCommonTypes';
 import {InventoryForm} from './InventoryUpdateDialog';
 import ObtainedPieceBox from './ObtainedPieceBox';
-import {EquipmentsByTierAndCategory} from '../EquipmentsInput';
 import {useStore} from 'stores/WizStore';
 import {PieceState} from './PiecesInventory';
 
@@ -29,6 +28,12 @@ const AddToInventoryDialog = ({
   const {t} = useTranslation('home');
   const theme = useTheme();
 
+  // hack to lazy rendering
+  const [onceOpen, notifyOpened] = useReducer((x) => true, false);
+  useEffect(() => {
+    open && notifyOpened();
+  }, [open]);
+
   const pieceIds = useMemo(() => drops.map((drop) => drop.id), [drops]);
   const pieces = useMemo(() => {
     return Array.from(piecesState.values())
@@ -51,30 +56,28 @@ const AddToInventoryDialog = ({
     defaultValues,
   });
 
-  useEffect(() => {
-    open && reset();
-  }, [open, reset]);
-
   const handleCancelDialog = () => {
     onCancel();
+    reset();
   };
 
   const handleUpdateInventory = () => {
     onUpdate(getValues());
     const inventory = Object.entries(getValues()).reduce<InventoryForm>((acc, [id, value]) => {
-      const count = parseInt(value);
-      const stock = piecesState.get(id)?.inStockCount;
-      count && stock && (acc[id] = `${count + stock}`);
+      const count = parseInt(value) ?? 0;
+      const stock = piecesState.get(id)?.inStockCount ?? 0;
+      acc[id] = `${count + stock}`;
       return acc;
     }, {});
     store.equipmentsRequirementStore.updateInventory(inventory);
+    reset();
   };
 
   const isFullScreen = useMediaQuery(theme.breakpoints.down('md'));
   const isXsOrSmallerScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const hasManyPieces = () => pieces.length > 3;
 
-  return <Dialog open={open} keepMounted fullWidth
+  return !onceOpen ? null : <Dialog open={open} keepMounted fullWidth
     fullScreen={hasManyPieces() && isFullScreen}
     maxWidth={hasManyPieces() && 'xl'}>
     <DialogTitle>獲得した設計図</DialogTitle>