avoid creating a div on every render in portal #4037
Conversation
🦋 Changeset detectedLatest commit: 166fc0c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| const elementRef = React.useRef<HTMLDivElement | null>(null) | ||
| if (!elementRef.current) { | ||
| const div = document.createElement('div') | ||
| // Portaled content should get their own stacking context so they don't interfere | ||
| // with each other in unexpected ways. One should never find themselves tempted | ||
| // to change the zIndex to a value other than "1". | ||
| div.style.position = 'relative' | ||
| div.style.zIndex = '1' | ||
| elementRef.current = div | ||
| } | ||
|
|
||
| // Portaled content should get their own stacking context so they don't interfere | ||
| // with each other in unexpected ways. One should never find themselves tempted | ||
| // to change the zIndex to a value other than "1". | ||
| hostElement.style.position = 'relative' | ||
| hostElement.style.zIndex = '1' | ||
| const elementRef = React.useRef(hostElement) | ||
| const element = elementRef.current |
There was a problem hiding this comment.
since we only used the ref, which is created on the first render, we can just create it on the first render.
this is still not SSR safe, however, and we should probably change this to account for that, but at least we're not wasting memory for no reason?
size-limit report 📦
|
| parentElement.appendChild(element) | ||
| onMount?.() | ||
|
|
||
| return () => { | ||
| parentElement.removeChild(element) | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [elementRef]) | ||
| }, [element]) |
There was a problem hiding this comment.
element is stable, so this is the same. I kind of wonder if the lack of exhaustive deps here indicates other issues, but ignoring that for now since this pr is keeping identical behavior characteristics, with just a bit less waste
Changelog
Portal avoids
createElementcall on every renderNew
Changed
Portal
Removed
Rollout strategy
Testing & Reviewing
Merge checklist