Adding onFirstUpdate function kills the page

[piechoo]

Reproduction demo

https://codesandbox.io/s/react-popper-v2-x-issue-template-forked-k37vgt?file=/src/index.js

Steps to reproduce the problem

1. Open the codesanbox
2. Page is unresponsive

What is the expected behavior?

It should run function on first update and not kill the page :)

What went wrong?

The page is totally unresponsive

Any other comments?

Packages versions

• Popper.js:
• react-popper:

[FezVrasta]

I think you should memoize that function with useCallback. Anyways I would suggest to upgrade to Floating UI as this version is not going to receive many updates.

[piechoo]

Unfortunately useCallback doesn't solve this issue.

[atomiks]

useCallback does solve it, it's a problem of the function being different on every render.

    onFirstUpdate: useCallback((state) => {
      console.log("Popper positioned on", state.placement)
    }, [])

[piechoo]

Okay, you're right, useCallback does solve it, but i think there is still an issue, why passing new function causes infinite rerender of component ?

[JosePadilla98]

Okay, you're right, useCallback does solve it, but i think there is still an issue, why passing new function causes infinite rerender of component ?

I experience the same problem and I'm agree with @piechoo