search

floating-ui / react-popper

🍿⚛Official React library to use Popper, the positioning library
https://popper.js.org/react-popper/
MIT License
2.5k stars 226 forks source link

Adding onFirstUpdate function kills the page #448

Open piechoo opened 2 years ago

piechoo commented 2 years ago

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

FezVrasta commented 2 years ago

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 2 years ago

Unfortunately useCallback doesn't solve this issue.

atomiks commented 2 years ago

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 2 years ago

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 9 months ago

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