From b760c8dd0a992cd4fceb15cc603de86f2457988f Mon Sep 17 00:00:00 2001
From: Dueen Eduarda <42207398+Dueen@users.noreply.github.com>
Date: Tue, 30 Aug 2022 17:22:55 +0200
Subject: [PATCH] docs(image): Use hook inside of function component (#40096)

The example broke the [Rules of Hooks](https://reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called%20inside%20the%20body%20of%20a%20function%20component.) by calling the hook outside of the function component.

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 docs/api-reference/next/image.md | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index c27c822fb76ef..b303e54cb63e3 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -279,14 +279,16 @@ The Ref must point to a DOM element or a React component that [forwards the Ref]
 import Image from 'next/image'
 import React from 'react'
 
-const lazyRoot = React.useRef(null)
+const Example = () => {
+  const lazyRoot = React.useRef(null)
 
-const Example = () => (
-  <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
-    <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
-    <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
-  </div>
-)
+  return (
+    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
+      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
+      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
+    </div>
+  )
+}
 ```
 
 **Example pointing to a React component**