Improve internal useElementSize hook by computing the size as soon as possible
#3153
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Instead of waiting for a `useEffect` to trigger, we can use `useMemo` to always compute the size the moment a DOM element is available (or changes). We also make sure to force a re-render when resizes are detected on the stable DOM node, which in turn causes the `useMemo` to recompute.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RobinMalfait
commented
Apr 30, 2024
thecrypticace
approved these changes
Apr 30, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR improves the
useElementSizehook by ensuring that the size of an element is calculated as soon as possible.Instead of waiting for a
useEffectto trigger, we can useuseMemoto always compute the size the moment a DOM element is available (or changes).Once a DOM node is stable, we also setup a
ResizeObserverto watch for changes. If we detect a resize, we simply force a re-render which also forces theuseMemoto recompute. This way we can always rely on theuseMemoto be the single source of truth without managing state ourselves.Before:
Notice how the second log has an
inputDOM element present, but the--button-widthis still at0pxAfter:
Notice how the second log is the first log where the
inputDOM element is present, and the--button-widthis immediately the correct value.