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

Treat empty string as null #22807

Merged
merged 1 commit into from
Nov 23, 2021
Merged

Conversation

salazarm
Copy link
Contributor

Summary

When we server render an empty string from the server the browser does not create a text node for the empty string. This leads to a hydration mismatch. Since #22629 we now throw on mismatches and fallback to client render. This causes empty strings to always lead to client rendering #22784. To fix this we're making the client treat empty strings as null so that there is no mismatch.

How did you test this change?

Jest

@facebook-github-bot facebook-github-bot added the React Core Team Opened by a member of the React Core Team label Nov 22, 2021
@sizebot
Copy link

sizebot commented Nov 22, 2021

Comparing: 149b420...9cabd85

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.02% 129.98 kB 130.01 kB = 41.56 kB 41.57 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.02% 134.74 kB 134.77 kB +0.01% 42.96 kB 42.96 kB
facebook-www/ReactDOM-prod.classic.js +0.03% 424.49 kB 424.63 kB +0.01% 78.24 kB 78.24 kB
facebook-www/ReactDOM-prod.modern.js +0.03% 413.04 kB 413.19 kB = 76.50 kB 76.51 kB
facebook-www/ReactDOMForked-prod.classic.js +0.03% 424.49 kB 424.63 kB +0.01% 78.24 kB 78.25 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 9cabd85

@eps1lon
Copy link
Collaborator

eps1lon commented Nov 23, 2021

Fixes #22784: https://codesandbox.io/s/react-18-fixed-emptry-string-hydration-mismatch-forked-wvvm9?file=/package.json

@salazarm salazarm merged commit c1220eb into facebook:main Nov 23, 2021
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Nov 29, 2021
Summary:
This sync includes the following changes:
- **[c1220ebdd](facebook/react@c1220ebdd )**: treat empty string as null ([#22807](facebook/react#22807)) //<salazarm>//
- **[09d9b1775](facebook/react@09d9b1775 )**: Update deprecated features in ESLint configuration files. ([#22767](facebook/react#22767)) //<Esteban>//
- **[bddbfb86d](facebook/react@bddbfb86d )**: Revert "Fix Node package.json ./ exports deprecation warning ([#22783](facebook/react#22783))" ([#22792](facebook/react#22792)) //<Sebastian Silbermann>//
- **[b831aec48](facebook/react@b831aec48 )**: chore(fast-refresh): double check wasMounted ([#22740](facebook/react#22740)) //<anc95>//
- **[8edeb787b](facebook/react@8edeb787b )**: Fix Node package.json ./ exports deprecation warning ([#22783](facebook/react#22783)) //<Rin Arakaki>//
- **[fdc1d617a](facebook/react@fdc1d617a )**: Flag for client render fallback behavior on hydration mismatch ([#22787](facebook/react#22787)) //<salazarm>//
- **[aa19d569b](facebook/react@aa19d569b )**: Add test selectors to experimental build ([#22760](facebook/react#22760)) //<Brian Vaughn>//
- **[520ffc77a](facebook/react@520ffc77a )**: Use globalThis if possible for native fetch in browser build ([#22777](facebook/react#22777)) //<Jiachi Liu>//
- **[afbc2d08f](facebook/react@afbc2d08f )**: Remove unused react-internal/invariant-args ESLint rule. ([#22778](facebook/react#22778)) //<Esteban>//
- **[ca94e2680](facebook/react@ca94e2680 )**: Remove 'packages/shared/invariant.js' ([#22779](facebook/react#22779)) //<Esteban>//
- **[83564712b](facebook/react@83564712b )**: Move SuspenseList to experimental channel ([#22765](facebook/react#22765)) //<Andrew Clark>//
- **[d4144e6e5](facebook/react@d4144e6e5 )**: fix : grammatical typo for test description ([#22764](facebook/react#22764)) //<Brijesh Prasad>//
- **[0b329511b](facebook/react@0b329511b )**: chore: fix comment typo ([#22657](facebook/react#22657)) //<Han Han>//
- **[e6f60d2ad](facebook/react@e6f60d2ad )**: fix typos ([#22715](facebook/react#22715)) //<180909>//

Changelog:
[General][Changed] - React Native sync for revisions c0c71a8...c1220eb

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D32646433

fbshipit-source-id: c534ee7a17141634700c90fc2c7b34bfbe17887a
nawbc pushed a commit to NawbExplorer/react-native that referenced this pull request Dec 7, 2021
Summary:
This sync includes the following changes:
- **[c1220ebdd](facebook/react@c1220ebdd )**: treat empty string as null ([facebook#22807](facebook/react#22807)) //<salazarm>//
- **[09d9b1775](facebook/react@09d9b1775 )**: Update deprecated features in ESLint configuration files. ([facebook#22767](facebook/react#22767)) //<Esteban>//
- **[bddbfb86d](facebook/react@bddbfb86d )**: Revert "Fix Node package.json ./ exports deprecation warning ([facebook#22783](facebook/react#22783))" ([facebook#22792](facebook/react#22792)) //<Sebastian Silbermann>//
- **[b831aec48](facebook/react@b831aec48 )**: chore(fast-refresh): double check wasMounted ([facebook#22740](facebook/react#22740)) //<anc95>//
- **[8edeb787b](facebook/react@8edeb787b )**: Fix Node package.json ./ exports deprecation warning ([facebook#22783](facebook/react#22783)) //<Rin Arakaki>//
- **[fdc1d617a](facebook/react@fdc1d617a )**: Flag for client render fallback behavior on hydration mismatch ([facebook#22787](facebook/react#22787)) //<salazarm>//
- **[aa19d569b](facebook/react@aa19d569b )**: Add test selectors to experimental build ([facebook#22760](facebook/react#22760)) //<Brian Vaughn>//
- **[520ffc77a](facebook/react@520ffc77a )**: Use globalThis if possible for native fetch in browser build ([facebook#22777](facebook/react#22777)) //<Jiachi Liu>//
- **[afbc2d08f](facebook/react@afbc2d08f )**: Remove unused react-internal/invariant-args ESLint rule. ([facebook#22778](facebook/react#22778)) //<Esteban>//
- **[ca94e2680](facebook/react@ca94e2680 )**: Remove 'packages/shared/invariant.js' ([facebook#22779](facebook/react#22779)) //<Esteban>//
- **[83564712b](facebook/react@83564712b )**: Move SuspenseList to experimental channel ([facebook#22765](facebook/react#22765)) //<Andrew Clark>//
- **[d4144e6e5](facebook/react@d4144e6e5 )**: fix : grammatical typo for test description ([facebook#22764](facebook/react#22764)) //<Brijesh Prasad>//
- **[0b329511b](facebook/react@0b329511b )**: chore: fix comment typo ([facebook#22657](facebook/react#22657)) //<Han Han>//
- **[e6f60d2ad](facebook/react@e6f60d2ad )**: fix typos ([facebook#22715](facebook/react#22715)) //<180909>//

Changelog:
[General][Changed] - React Native sync for revisions c0c71a8...c1220eb

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D32646433

fbshipit-source-id: c534ee7a17141634700c90fc2c7b34bfbe17887a
acdlite added a commit to acdlite/react that referenced this pull request Jan 19, 2022
acdlite pushed a commit to acdlite/react that referenced this pull request Jan 19, 2022
acdlite pushed a commit to acdlite/react that referenced this pull request Jan 19, 2022
This one affects the output of some Jest snapshot tests, so I'm going
to land it before the other changes.
acdlite pushed a commit to acdlite/react that referenced this pull request Jan 19, 2022
This one affects the output of some Jest snapshot tests, so I'm going
to land it before the other changes.
@salazarm salazarm deleted the reactIgnoreEmptyString branch February 10, 2022 14:27
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
rickhanlonii pushed a commit that referenced this pull request Mar 1, 2024
This was fixed in #22807 so we
don't need these special cases anymore.
github-actions bot pushed a commit that referenced this pull request Mar 1, 2024
This was fixed in #22807 so we
don't need these special cases anymore.

DiffTrain build for [bb4b147](bb4b147)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
This was fixed in facebook#22807 so we
don't need these special cases anymore.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants