docs: add rule documentation

docs/rules/no-render-return-undefined.md

@@ -0,0 +1,62 @@
+# Disallow returning undefined from react components (`react/no-render-return-undefined`)
+
+💼 This rule is enabled in the ☑️ `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs).
+
+<!-- end auto-generated rule header -->
+
+> In React 18, components may render undefined, and React will render nothing to the DOM instead of throwing an error. However, accidentally rendering nothing in a component could still cause surprises. This rule will warn if the `return` statement in a React Component returns undefined.
+
+Issue: [#3020](https://github.com/jsx-eslint/eslint-plugin-react/issues/3020)
+
+## Rule Details
+
+This rule will warn if the `return` statement in a React component returns undefined.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+function App() {
+  return undefined;
+}
+
+// OR
+
+let ui;
+function App() {
+  return ui;
+}
+
+// OR
+
+function getUI() {
+  if (condition) return <h1>Hello</h1>;
+}
+function App() {
+  return getUI();
+}
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+function App() {
+  return <div />;
+}
+
+// OR
+
+let ui = <div />;
+function App() {
+  return ui;
+}
+
+// OR
+
+function getUI() {
+  if (condition) return <h1>Hello</h1>;
+  return null;
+}
+function App() {
+  return getUI();
+}
+```

tests/lib/rules/no-render-return-undefined.js

@@ -258,6 +258,25 @@ ruleTester.run('no-render-return-undefined', rule, {
             }
         `,
     },
+    {
+      code: `
+            let ui = <Component />;
+            function App() {
+                return ui;
+            }
+      `,
+    },
+    {
+      code: `
+        function getUI() {
+            if(condition) return <h1>Hello</h1>;
+            return null;
+        }
+        function App() {
+            return getUI();
+        }
+      `,
+    },
     {
       code: `
             function App() {
@@ -669,6 +688,38 @@ ruleTester.run('no-render-return-undefined', rule, {
           `,
       errors: [{ messageId: 'returnsUndefined' }],
     },
+    {
+      code: `
+        let ui;
+        function App() {
+            return ui;
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        let ui;
+        function App() {
+            if(cond) {
+              ui = <div />;
+            }
+            return ui;
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
+    {
+      code: `
+        function getUI() {
+            if(condition) return <h1>Hello</h1>;
+        }
+        function App() {
+            return getUI();
+        }
+      `,
+      errors: [{ messageId: 'returnsUndefined' }],
+    },
     {
       code: `
             function App() {