Empty string without <Text> component does not cause error / crash

[karlhorky]

Description

Hi there, first of all, thanks so much for your continued work on React Native, amazing project! 🙌

Recently I tried adding an empty string (both literal '' and a variable with the same value) outside of a <Text> component and I did not experience a crash like I was expecting (I was expecting it to show me the Text strings must be rendered within a <Text> component. error as documented in many issues in this repo and elsewhere on the Internet).

For example, this code:

const App = () => {
  const name = '';
  return (
    <SafeAreaView>
      <View>
        <Text>Empty string outside of &lt;Text&gt;:</Text>
        {''}
        <Text>Empty string variable outside of &lt;Text&gt;:</Text>
        {name}
      </View>
    </SafeAreaView>
  );
};

...does not cause a crash:

Whereas adding content to one of the string literals (adding the 'a') does indeed cause the error:

My question: Is this an intentional feature in the last versions of React Native? Or a regression?

Motivation: If this is indeed not an issue, then the documentation for eslint-plugin-react/jsx-no-leaked-render needs to be changed: jsx-eslint/eslint-plugin-react#3203 (comment)

cc @rickhanlonii I created an issue over here, since you mentioned you would take a look into it

• Original Tweet: https://twitter.com/karlhorky/status/1577257935796740096
• Reproduction (react-native@0.70.1): https://github.com/karlhorky/react-native-empty-string-outside-text-component

Version

0.70.1

Output of npx react-native info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 307.61 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.1 => 0.70.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
info React Native v0.70.3 is now available (your project is running on v0.70.1).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.70.3
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.70.1
info To upgrade, run "react-native upgrade".

Steps to reproduce

1. Clone the repository above
2. Start the application in an iPhone Simulator or Android emulator
3. The empty strings outside of <Text> components do not cause the app to crash

Snack, code example, screenshot, or link to a repository

• Reproduction repo (react-native@0.70.1): https://github.com/karlhorky/react-native-empty-string-outside-text-component
• Snack: https://snack.expo.dev/@karlhorky/vigorous-pastry

[rickhanlonii]

This was an intentional change we made in React, but I think we missed it in the React Native changelog. The PR is here: facebook/react#22807

The idea on Web is that when we server render an empty string, the client will received "nothing" so it does not know how to disambiguate whether null was rendered or an empty string was rendered. To fix, we now treat the empty string as null and there's no mismatch.

For React Native, this behavior also works because the we don't need to error when we render nothing. The reason we error for text outside of a Text node is a mix of technical and developer experience reasons. On the technical side, in order to render text we need to have some context in the app to know how to render the text (which the component provides).

For empty text though, we're rendering nothing to the screen, so we can render the empty outside of the Text component by just not rendering anything, thus no need to error.

[karlhorky]

Thanks for the feedback here @rickhanlonii ! I'll update the docs for eslint-plugin-react!