Блог

Я борюсь с проблемой производительности реакции при добавлении элемента в поле. Для этого я использую библиотеку React Rnd.

У меня есть карта, которая отображает элементы, когда внутри массива появляется новый элемент:

 children.map((children, index) => (
        <Box
          key={children.id}
          isPreview={false}
          index={index}
          slot={name}
          {...children}
        />
      )),
 

Компонент Box Rnd — это компонент из библиотеки, и он на самом деле большой.

 <Rnd
      style={{
       //2 lines off css
      }}
      minHeight={MIN_SIZE}
      minWidth={MIN_SIZE}
      enableResizing={isResizingEnabled}
      disableDragging={condition}
      size={size}
      position={Position}
      lockAspectRatio={isAspectRatioLocked}
      onResizeStart={onResizeStart}
      onDragStop={(e, newPosition) => {
        onDragStop(newPosition)
      }}
      onResizeStop={(e, dir, ref, delta, newPosition) =>
        onResizeStop(ref, newPosition)
      }
      resizeHandleComponent={createResizeHandles(isInCollision)}
      dragGrid={grid}
      resizeGrid={grid}
      bounds="parent"
    >
      <StyledDiv
        onClick={() => {
          
          dispatch(actions.setEditMode({...properties}))
        }}
        isBeingCropped={isCroppingEnabled}
        isPreview={isPreview}
        isEditable={isEditable}
        isInCollision={isInCollision}
        isEditStartable={isEditStartable}
      >
        {children}
      </StyledDiv>
    </Rnd>
 

И проблема в том, что когда я добавляю 4 элемента в это поле, иногда это занимает 2-4 секунды…
Есть идеи, как это можно решить?

Есть ли какое-нибудь простое решение, чтобы сделать это быстрее, или мне нужно исследовать каждую функцию/хук и оптимизировать ее с помощью какого-то useCallback, useMemo или чего-то еще?