React performance issue with drag and drop

Question

I'm struggling with react performance issue while adding an element to the box. For this, I use React Rnd library.

I have a map that renders items when there is a new item inside the array:

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

Box component is Rnd component from the library, and it is actually big one.

<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>

And the problem is when I add 4 elements to this box, it took sometimes 2-4 seconds... Any idea how it could be solved?

Is there any simple solution to make it faster, or do I have to investigate each function/hook and optimize it with some useCallback, useMemo, or something?

Answer 1

Yes, you should start from avoiding unnecessary re-renders, then you can look into optimizing each function. As this is a drag and drop component, i believe most props will change often whiles you drag an element, as a result make sure that each re-render is important before actually re rendering the component.

Here are a few places to start from.

Pass only what is needed to the box

Instead of spreading the children to the Box, pass only what is need to it, this will avoid any unnecessary re renders in case there are props in there that the Box do not care about.

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

Use Memoization to avoid re renders

For times when the objects haven't moved, you may want to avoid any re renders, as a result memoize the Components.

Use useCallback for functions

This will prevent the callback from being assigned everytime the parent is re rendered. The biggest culprit i see is the onClick handler which depends on the actions, as a result will render the box again and again when the action changes, even though the box doesn't depend on all the actions

const { setEditMode } = dispatch;

const handleDragStop = useCallback(
  (e, newPosition) => {
    onDragStop(newPosition);
  },
  [onDragStop]
);

const handleResizeStop = useCallback(
  (e, dir, ref, delta, newPosition) => {
    onResizeStop(ref, newPosition);
  },
  [onResizeStop]
);
const handleOnClick = useCallback(() => {
  dispatch(setEditMode({ ...properties }));
}, [onResizeStop, setEditMode, properties]);

<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={handleDragStop}
  onResizeStop={handleResizeStop}
  resizeHandleComponent={createResizeHandles(isInCollision)}
  dragGrid={grid}
  resizeGrid={grid}
  bounds="parent"
>
  <StyledDiv
    onClick={handleClick}
    isBeingCropped={isCroppingEnabled}
    isPreview={isPreview}
    isEditable={isEditable}
    isInCollision={isInCollision}
    isEditStartable={isEditStartable}
  >
    {children}
  </StyledDiv>
</Rnd>;

Checkout this article I wrote here if you need any further explanation