Custom PopperJS React wrapper

[bmdalex]

Custom PopperJS React wrapper

Problem description

We need to build a custom React wrapper around popper.js library (pure JS). The one offered by popper.js, called react-popper has performance issues:

1. Performance issues on a large number of poppers #185:

React Bootstrap and Material UI are using popper.js as well and have decided to write their own React wrappers, https://material-ui.com/utils/popper/
(see: floating-ui/react-popper#185 (comment))

2. Popper perf issues when integrating react-popper in Dropdown component

As you can see here:

• feat(dropdown): align, position, offset props + automatic position #1312 (review)
• feat(dropdown): align, position, offset props + automatic position #1312 (comment)

There are obvious perf issues caused by:

1. recreating the PopperJS instance (responsible for calculating styles that need to be applied for positioning elements) every time there is a scroll/resize event: https://github.com/FezVrasta/popper.js/blob/36cc6c66e55f716232166c9a5725d8d08c4ec338/packages/popper/src/utils/setupEventListeners.js#L38.

2. recreating the PopperJS instance causes the modifiers to be run on every scroll/resize event

3. one of these default modifiers, called updateStateModifier causes a rerender on every scroll/resize event: https://github.com/FezVrasta/react-popper/blob/ff9dde9ca94c93be30098b28cf0361ca65a766ce/src/Popper.js#L94

Proposed solution

Create a basic custom Popper component (similar to the one provided by react-popper) that:

• applies styles directly
• causes rerenders on small set of conditions (mostly props changes or calculated styles) but not on side effects coming from browser events
• reference: https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Popper/Popper.js