DragAndDrop with custom components causes re-mount on each render

[Poky85]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/Poky85/demo-react-big-calendar-issue

Bug description

When using Drag and drop addon in combination with custom components there is an issue with components being recreated on each render.

See the minimal reproduction repo. There I use custom EventWrapper component and log each remount in the console. It remounts although components passed in the prop are stable.

---

react-big-calendar@1.9.1 introduced change in custom components merge. In DragAndDrop class component there was mergeComponents() call moved from constructor to render function. See the pull request here.

This is bad approach. Now custom components gets recomputed on each render. React unmounts previous components and mounts them again because references (component functions) are not stable. This has negative impacts:

• Performance issue – unmounted components gets removed from the DOM and then are added again. It triggers lot of unnecessary DOM operations.
• It breaks components lifecycle

Expected Behavior

Custom components should not remount unless the items in components prop changes.

Actual Behavior

Custom components are remounted on each render.

react-big-calendar version

1.9.1

React version

18.3.1

Platform/Target and Browser Versions

macOS 14.2.1 + Chrome 124 / Firefox 125 / Safari 17.2.1

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[TemaTarasov]

We have the same issues, the root cause of the issue is that every render they create new factories of provided components.

I fixed that by moving this.components to a constructor, to provide more general behavior I would move that logic with merging + verification of links inside the shouldComponentUpdate function to prevent additional re-renders along with updating the this.components

...
  shouldComponentUpdate(nextProps, nextState) {
    if (!isEqual(this.props.components, nextProps.components)) {
      this.components = mergeComponents(nextProps.components, {
        eventWrapper: EventWrapper,
        eventContainerWrapper: EventContainerWrapper,
        weekWrapper: WeekWrapper,
      });
    }

    return true;
  }
...