Lot of rerenders?
Closed this issue ยท 6 comments
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?
I'm not sure off the top of my head, but I will look at this in the morning :) thanks for catching this!
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.
Maybe it's this line?
const Portal = ({ children }: { children: ReactNode }) => {
if (portal.current instanceof HTMLElement) return createPortal(children, portal.current)
return null
}
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
๐
Confirm fix works! ๐๐ป
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 ?