floating-ui/react-popper

Adding onFirstUpdate function kills the page

piechoo opened this issue · 5 comments

piechoo commented

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 commented

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 commented

Unfortunately useCallback doesn't solve this issue.

atomiks commented

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 commented

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 commented

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