Callback in modifier causes endless loop

[rowa-audil]

Hello popperjs Team!

In my project, I've come across a problem. It seems to be good relation to the close issue #362. You guys provide a way to set modifiers like offset by using a callback to calculate whatever I want. Turns out this causes an endless loop. Presumably, it's caused by React rendering the component again as soon as the value comes out of the callback, causing React to think something changed and rerenders and there's the loop. This is just a hypothesis though.

Below I have a codesandbox example using typescript. If necessary I will do it in JS but I prefer TS

Reproduction demo

https://codesandbox.io/s/popper-js-endless-loop-when-passing-modifier-with-callback-jz5sl?file=/src/App.tsx

Steps to reproduce the problem

1. As soon as you open the example the endless loop will start. So I suggest waiting for the browser to tell you to stop that progress
2. Look at the modifiers and you'll find a commented out offset modifier which would make it work like a charm

What is the expected behavior?

To get the value out of the callback and set it as the value for the modifier.

What went wrong?

Endless loop probably caused by rerendering due to React thinking a value changed

Any other comments?

none

Packages versions

• Popper.js: 2.9.1
• react-popper: 2.2.5

[FezVrasta]

Modifiers should be defined in a useMemo

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

[rowa-audil]

@FezVrasta Thank you for the fast reply! It solved the issue.