Lot of rerenders?

[rijk]

Hi, see this CodeSandbox: https://codesandbox.io/s/useportal-hdhny

I am trying to put a form in the modal, but after every keypress the input loses focus. Inspecting the DOM I noticed the portal div is rerendered very frequently, almost on every keypress/click. The rerender for some reason really recreates the whole DOM note; when I expand the contents of the portal div, they are collapsed again after the rerender. I have trouble figure out why it is happening, already tried wrapping the component in a React.memo but it didn't prevent the rerenders. I feel it's coming from the Portal itself. Can you figure out what is going on here?

[alex-cory]

I'm not sure off the top of my head, but I will look at this in the morning :) thanks for catching this!

[rijk]

Here's a stripped down version, with a normal input, and one in a Portal, where you can clearly see the losing focus problem: https://codesandbox.io/s/useportal-x3loo . Hope it helps tracking down the issue.

[rijk]

Maybe it's this line?

  const Portal = ({ children }: { children: ReactNode }) => {
    if (portal.current instanceof HTMLElement) return createPortal(children, portal.current)
    return null
  }

[alex-cory]

Maybe it's this line?

  const Portal = ({ children }: { children: ReactNode }) => {
    if (portal.current instanceof HTMLElement) return createPortal(children, portal.current)
    return null
  }

I fixed that and published a new version just now 0.1.46 🙂

[rijk]

Confirm fix works! 👏🏻

[DgeDge63]

Hi,
this problem seems to have reappeared since version 1.0.0, this may be due to the callback dependency array.
Any advise for this ?