-
Notifications
You must be signed in to change notification settings - Fork 47.2k
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
Fix hydration of non-string dangerousSetInnerHTML.__html #13353
Conversation
@@ -249,7 +249,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean { | |||
typeof props.children === 'number' || | |||
(typeof props.dangerouslySetInnerHTML === 'object' && | |||
props.dangerouslySetInnerHTML !== null && | |||
typeof props.dangerouslySetInnerHTML.__html === 'string') | |||
typeof props.dangerouslySetInnerHTML.__html != null) |
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.
I don't think you intended to keep the typeof
here?
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.
No. Also there are other reasons why this doesn't work. Will look again.
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.
LGTM minus the typo (I think)
Fixes #11789.
With this PR, non-string
dangerousInnerHTML.__html
is now handled during hydration the same way as we handle it during a pure client-only or server-only render. Specifically, we coerce any value__html
value that isn'tnull
orundefined
to a string. Previously, hydration behaved inconsistently.These are the same tests run against on master:
You can see that the only ones that were failing are related to hydration. This tells us that the PR doesn't change the behavior for purely client-only or server-only renders, but it fixes the inconsistency when hydrating on top of good markup.