React-popper: Infinitive loop in custom modifier

[sajcics]

Reproduction demo

https://codesandbox.io/s/react-popper-v2x-issue-template-zck02?file=/src/index.js

Steps to reproduce the problem

1. open attached link
2. open console
3. you will see infinitive loop and whole application and browser stuck

What is the expected behavior?

Custom modifier modifies popper's width with the same width of input element. Also, without any infinitive loop.

What went wrong?

Custom modifier goes to infinitive loop of defined function:

 fn: ({state: { elements: { popper, reference }}}) => {
   console.log("state", state);
  popper.style.width = `${reference.offsetWidth}px`;
}

Any other comments?

The same code worked with packages popperjs/core 2.4.0 and react 16.13.1. Code was tested in _Firefox (76.0.1)_ and _Brave (Version 1.8.96 Chromium: 81.0.4044.138)_ browser of _Linux Ubuntu 76.0.1_ OS.

Packages versions

• Popper.js: 2.4.0
• react-popper: 2.2.3

[FezVrasta]

This happens because you are defining the modifier in-line, so on each render its identity changes, and leads to the render loop.

You should define the modifier in a useMemo, or directly outside the component.

https://codesandbox.io/s/react-popper-v2x-issue-template-zfrf6?file=/src/index.js

[RobertWHurst]

It might be good to mention this in the documentation if not already there.

[FezVrasta]

https://popper.js.org/react-popper/v2/faq/#why-i-get-render-loop-whenever-i-put-a-function-inside-the-popper-configuration