-
Notifications
You must be signed in to change notification settings - Fork 48.5k
feat: Add useHydrateableEffect #17350
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
Conversation
@@ -1337,6 +1337,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) { | |||
switch (node.name) { | |||
case 'useEffect': | |||
case 'useLayoutEffect': | |||
case 'useHydrateableEffect': |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not so sure about the naming. We don't really hydrate an effect since it those are never executed on the server anyway. I only used hydration in the name to communicate that the behavior of the hook is tied to hydration.
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 9e45e76:
|
Details of bundled changes.Comparing: cf00812...9e45e76 react-test-renderer
react-native-renderer
react-art
react-dom
react-reconciler
ReactDOM: size: 🔺+0.1%, gzip: -0.1% Size changes (experimental) |
Details of bundled changes.Comparing: cf00812...9e45e76 react-native-renderer
react-reconciler
react-dom
react-art
react-test-renderer
ReactDOM: size: 🔺+0.1%, gzip: 🔺+0.1% Size changes (stable) |
ad10a1f
to
e7f2e4b
Compare
e7f2e4b
to
48f3731
Compare
48f3731
to
9e45e76
Compare
Closing since the original issue was resolved in #14927 (comment) |
This is an attempt to resolve #14927
Rationale
If the component requires a layout effect no current workaround solves the underlying issue. Explicit fallback views are most likely impossible (that's why we need layout in the first place) or the component itself is a sufficient fallback (e.g. the overall markup is renderable on the server but we need to adjust some minor visuals).
Since components using
useLayoutEffect
will always have an inconsistent UI before hydration we can potentially downgrade these effects to passive effects i.e. it's already inconsistent so we might as well make it inconsistent a little bit longer to make room for higher priority work.Behavior