rename rule to jsx-no-leaked-render

README.md

@@ -202,7 +202,7 @@ Enable the rules that you would like to use.
 | ✔ |  | [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) | Comments inside children section of tag should be placed inside braces |
 |  |  | [react/jsx-no-constructed-context-values](docs/rules/jsx-no-constructed-context-values.md) | Prevents JSX context provider values from taking values that will cause needless rerenders. |
 | ✔ |  | [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) | Enforce no duplicate props |
-|  | 🔧 | [react/jsx-no-leaked-zero](docs/rules/jsx-no-leaked-zero.md) | Prevent zero from being rendered on numerical condition |
+|  | 🔧 | [react/jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md) | Prevent problematic leaked values from being rendered |
 |  |  | [react/jsx-no-literals](docs/rules/jsx-no-literals.md) | Prevent using string literals in React component definition |
 |  |  | [react/jsx-no-script-url](docs/rules/jsx-no-script-url.md) | Forbid `javascript:` URLs |
 | ✔ | 🔧 | [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) | Forbid `target="_blank"` attribute without `rel="noreferrer"` |

docs/rules/jsx-no-leaked-zero.md → docs/rules/jsx-no-leaked-render.md

@@ -1,14 +1,33 @@
-# Prevent zero from being rendered on numerical condition (react/jsx-no-leaked-zero)
+# Prevent problematic leaked values from being rendered (react/jsx-no-leaked-render)
 
-When rendering an element in JSX based on a numerical condition, it might be possible to end up rendering a 0 to the DOM.
+Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering.
 
-The number 0 is a special case for JSX inline conditions, since it's the only falsy expression that it's returned by the render method.
 
 ## Rule Details
 
-This rule aims to prevent potential numerical condition from rendering a 0 value to the DOM. Since the rule doesn't know if the condition is based on numbers or something else due to the lack of types, it will report all sorts of conditionals within a JSX expression.
+This rule aims to prevent dangerous leaked values from being rendered since they can cause unexpected values reaching the final DOM or even crashing your render method.
 
-TODO: add dangerous cases here
+In React, you might end up rendering unexpected values like `0` or `NaN`. In React Native, your render method will crash if you render `0`, `''`, or `NaN`:
+
+```jsx
+const Example = () => {
+  return (
+    <>
+      {0 && <Something/>}
+      {/* React: renders undesired 0 */}
+      {/* React Native: crashes 💥 */}
+
+      {'' && <Something/>}
+      {/* React: renders nothing */}
+      {/* React Native: crashes 💥 */}
+
+      {NaN && <Something/>}
+      {/* React: renders undesired NaN */}
+      {/* React Native: crashes 💥 */}
+    </>
+  )
+}
+```
 
 This can be avoided by:
 - casting the condition to bool: `{!!someValue && <Something />}`
@@ -129,7 +148,7 @@ It can be set like:
 ```json5
 {
   // ...
-  "react/jsx-no-leaked-zero": [<enabled>, { "validStrategies": ["ternary", "cast"] }]
+  "react/jsx-no-leaked-render": [<enabled>, { "validStrategies": ["ternary", "cast"] }]
   // ...
 }
 ```

index.js

@@ -38,7 +38,7 @@ const allRules = {
   'jsx-no-comment-textnodes': require('./lib/rules/jsx-no-comment-textnodes'),
   'jsx-no-constructed-context-values': require('./lib/rules/jsx-no-constructed-context-values'),
   'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
-  'jsx-no-leaked-zero': require('./lib/rules/jsx-no-leaked-zero'),
+  'jsx-no-leaked-render': require('./lib/rules/jsx-no-leaked-render'),
   'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
   'jsx-no-script-url': require('./lib/rules/jsx-no-script-url'),
   'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),

lib/rules/jsx-no-leaked-zero.js → lib/rules/jsx-no-leaked-render.js

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Prevent zero from being rendered on numerical condition
+ * @fileoverview Prevent problematic leaked values from being rendered
  * @author Mario Beltrán
  */
 
@@ -14,7 +14,7 @@ const isParenthesized = require('../util/ast').isParenthesized;
 //------------------------------------------------------------------------------
 
 const messages = {
-  noPotentialNumericEvaluation: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
+  noPotentialLeakedRender: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
 };
 
 const CAST_STRATEGY = 'cast';
@@ -27,10 +27,10 @@ const DEFAULT_VALID_STRATEGIES = [TERNARY_STRATEGY, CAST_STRATEGY];
 module.exports = {
   meta: {
     docs: {
-      description: 'Prevent zero from being rendered on numerical condition',
+      description: 'Prevent problematic leaked values from being rendered',
       category: 'Possible Errors',
       recommended: false,
-      url: docsUrl('jsx-no-leaked-zero'),
+      url: docsUrl('jsx-no-leaked-render'),
     },
 
     messages,
@@ -111,7 +111,7 @@ module.exports = {
           return;
         }
 
-        report(context, messages.noPotentialNumericEvaluation, 'noPotentialNumericEvaluation', {
+        report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {
           node,
           fix(fixer) {
             return ruleFixer(fixer, node, leftSide, node.right);
@@ -125,7 +125,7 @@ module.exports = {
           return;
         }
 
-        report(context, messages.noPotentialNumericEvaluation, 'noPotentialNumericEvaluation', {
+        report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {
           node,
           fix(fixer) {
             return ruleFixer(fixer, node, node.test, node.consequent);