From 03d9031155e70b1f3f55d623ae6645a0ad73b24f Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Thu, 22 Apr 2021 07:02:25 +0100
Subject: [PATCH] docs: return values for render functions

---
 src/guide/render-function.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index a5a17a7689..e521a89dfa 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -567,6 +567,33 @@ render () {
 }
 ```
 
+## Return Values for Render Functions
+
+In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives.
+
+Returning a string will create a text VNode, without any wrapping element:
+
+```js
+render() {
+  return 'Hello world!'
+}
+```
+
+We can also return an array of children, without wrapping them in a root node. This creates a fragment:
+
+```js
+// Equivalent to a template of `Hello<br>world!`
+render() {
+  return [
+    'Hello',
+    h('br'),
+    'world!'
+  ]
+}
+```
+
+If a component needs to render nothing, perhaps because data is still loading, it can just return `null`. This will be rendered as a comment node in the DOM.
+
 ## JSX
 
 If we're writing a lot of `render` functions, it might feel painful to write something like this: