Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure hooks are always called in the same order #5

Merged
merged 4 commits into from
Mar 19, 2020

Conversation

mdingena
Copy link
Member

@mdingena mdingena commented Mar 19, 2020

Context

<Observe> was breaking one of React's rules by conditionally calling useResizeObserverEntry() and useBreakpoints(). The same hooks should always be called, but this was not guaranteed because the context from which these hooks are reading is initialised with null, and then updated as the first observation from <Provider> comes in.

Changes

  • useBreakpoints() passes injectResizeObserverEntry on to useResizeObserverEntry() and always calls it.
  • useResizeObserverEntry() always calls useContext() but conditionally returns the value from context or injectResizeObserverEntry if defined.
  • <Observe> initialises its breakpoints prop with {} instead of undefined.
  • <Observe> calls useBreakpoints() with breakpoints, which is now always defined. useBreakpoints() already handled missing keys in breakpoints, so it returns undefined for both widths and heights breakpoints, as intended.
  • Updated useResizeObserverEntry() documentation.

@mdingena mdingena merged commit a4fd8d3 into master Mar 19, 2020
@mdingena mdingena deleted the observe-hook-rules branch March 19, 2020 04:36
@mdingena mdingena added the bug Something isn't working label May 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant