search

floating-ui / react-popper

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

Rendering 3 times on load every time #396

Closed tounsoo closed 3 years ago

tounsoo commented 3 years ago

Reproduction demo

https://codesandbox.io/s/condescending-stallman-e81yy?file=/src/App.js

Steps to reproduce the problem

  1. open console
  2. refresh the rendered page
  3. you see 'rendered' being logged 3 times

What is the expected behavior?

Seeing only one log of 'rendered'

What went wrong?

Looks like its rendering 3 times by default

Any other comments?

Is this normal behavior?

Packages versions

OmarMorales71 commented 3 years ago

@tounsoo Hello! is this happening in all components? or do you know about specific components with this behavior?

tounsoo commented 3 years ago

@OmarMorales71 Not sure what you mean. The Codesandbox example has only one component.

tu4mo commented 3 years ago

It's expected because setReferenceElement and setPopperElement are called after the initial render.

tounsoo commented 3 years ago

True, is there another way to use usePopper so that we don't have to rely on useState, hopefully avoiding additional renders?

FezVrasta commented 3 years ago

That's because we use ref callbacks, so any time one is set the component re-renders. This is needed because we need to know when a reference or popper element changes identity.