Ensure hooks are always called in the same order #5
+18
−17
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.
Context
<Observe>
was breaking one of React's rules by conditionally callinguseResizeObserverEntry()
anduseBreakpoints()
. The same hooks should always be called, but this was not guaranteed because the context from which these hooks are reading is initialised withnull
, and then updated as the first observation from<Provider>
comes in.Changes
useBreakpoints()
passesinjectResizeObserverEntry
on touseResizeObserverEntry()
and always calls it.useResizeObserverEntry()
always callsuseContext()
but conditionally returns the value from context orinjectResizeObserverEntry
if defined.<Observe>
initialises itsbreakpoints
prop with{}
instead ofundefined
.<Observe>
callsuseBreakpoints()
withbreakpoints
, which is now always defined.useBreakpoints()
already handled missing keys inbreakpoints
, so it returnsundefined
for bothwidths
andheights
breakpoints, as intended.useResizeObserverEntry()
documentation.