Custom modifiers create an infinite loop when you provide an 'fn'

[ruigouveiamaciel]

Reproduction demo

This issue causes the page to enter an infinite loop, therefore on some browsers entering this sandbox will just freeze the browser, and in others a blank page will be rendered.

https://codesandbox.io/s/react-popper-v2x-issue-template-forked-crt8b

Steps to reproduce the problem

1. Provide a custom modifier to usePopper with any fn function. Example:

   {
       name: "myCustomModifier",
       phase: "main",
       enabled: true,
       fn: () => {}
   }

2. Done. It will now crash or render a blank page depending on the browser.

What is the expected behavior?

The expected behavior on the given repro is that nothing changes compared to the issue template.

What went wrong?

Browser enters what seems to be an infinite loop/freezes whenever you provide a custom modifier.

Any other comments?

Even the community modifiers mentioned here freeze the browser: https://popper.js.org/docs/v2/modifiers/#custom-modifiers

Packages versions

• Popper.js: 2.3.3 (also tested on 2.5.3)
• react-popper: 2.2.2 (also tested on 2.2.3)

[ruigouveiamaciel]

This seems to be the same problem as #362 except that this issue follows the template

[ruigouveiamaciel]

Doing further testing i found out that custom modifiers work using the render components, which are depreacted.

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

[atomiks]

The modifier object needs to be placed as a constant/static object reference outside of the component (or memo'd).

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