From 2ecf5c9857237b9bd28339e9a4061ad77db51ed5 Mon Sep 17 00:00:00 2001
From: Claudiu Limban <claudiu.limban@qualitance.com>
Date: Sat, 15 Mar 2025 22:09:01 +0200
Subject: [PATCH] docs(render-function#template-refs): Make useTemplateRef the
 default example

---
 src/guide/extras/render-function.md | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index 2bd0be44cc..344ce2b5af 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -706,36 +706,39 @@ If the directive is registered by name and cannot be imported directly, it can b
 
 <div class="composition-api">
 
-With the Composition API, template refs are created by passing the `ref()` itself as a prop to the vnode:
+With the Composition API, when using [`useTemplateRef()`](/api/composition-api-helpers#usetemplateref) <sup class="vt-badge" data-text="3.5+" />  template refs are created by passing the string value as prop to the vnode:
 
 ```js
-import { h, ref } from 'vue'
+import { h, useTemplateRef } from 'vue'
 
 export default {
   setup() {
-    const divEl = ref()
+    const divEl = useTemplateRef('my-div')
 
-    // <div ref="divEl">
-    return () => h('div', { ref: divEl })
+    // <div ref="my-div">
+    return () => h('div', { ref: 'my-div' })
   }
 }
 ```
 
-or (with version >= 3.5)
+<details>
+<summary>Usage before 3.5</summary>
+
+In versions before 3.5 where useTemplateRef() was not introduced, template refs are created by passing the ref() itself as a prop to the vnode:
 
 ```js
-import { h, useTemplateRef } from 'vue'
+import { h, ref } from 'vue'
 
 export default {
   setup() {
-    const divEl = useTemplateRef('my-div')
+    const divEl = ref()
 
     // <div ref="divEl">
-    return () => h('div', { ref: 'my-div' })
+    return () => h('div', { ref: divEl })
   }
 }
 ```
-
+</details>
 </div>
 <div class="options-api">