From 167603a7ba7940ecdfdff0eb3975fb2698ab2465 Mon Sep 17 00:00:00 2001
From: Rahul Rao <63695122+rahulrao0209@users.noreply.github.com>
Date: Sat, 24 Dec 2022 05:59:34 +0530
Subject: [PATCH] Making serverUrl a reactive dependency for the provided
 example. (#5392)

The serverUrl variable should be moved inside the component and can be stored as a state to indicate that it's a reactive variable and will be highlighted as such by the linter. Previously the serverUrl variable was stored outside the component function body thus making it a non-reactive value and so it shouldn't have been highlighted by the linter as a useEffect dependency as shown in the concerned example.
---
 beta/src/content/apis/react/useEffect.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/content/apis/react/useEffect.md b/beta/src/content/apis/react/useEffect.md
index 9256b6da3..07a2a99a0 100644
--- a/beta/src/content/apis/react/useEffect.md
+++ b/beta/src/content/apis/react/useEffect.md
@@ -1023,9 +1023,9 @@ If either `serverUrl` or `roomId` change, your Effect will reconnect to the chat
 **[Reactive values](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values) include props and all variables and functions declared directly inside of your component.** Since `roomId` and `serverUrl` are reactive values, you can't remove them from the dependency list. If you try to omit them and [your linter is correctly configured for React,](/learn/editor-setup#linting) the linter will flag this as a mistake that you need to fix:
 
 ```js {8}
-const serverUrl = 'https://localhost:1234';
-
 function ChatRoom({ roomId }) {
+  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
+  
   useEffect(() => {
     const connection = createConnection(serverUrl, roomId);
     connection.connect();