docs(start/tutorial): remove unnecessary useEffect (#9561)

nathggns · MichaelDeBoey · web-flow · commit c63e131bf771 · 2025-05-08T10:07:02.000-04:00
Co-authored-by: Michaël De Boey &lt;info@michaeldeboey.be&gt;
diff --git a/contributors.yml b/contributors.yml
@@ -505,6 +505,7 @@
 - n8agrin
 - na2hiro
 - nareshbhatia
+- nathggns
 - nauvalazhar
 - naveed-fida
 - navid-kalaei
diff --git a/docs/start/tutorial.md b/docs/start/tutorial.md
@@ -1210,22 +1210,25 @@ You could certainly do this as a controlled component. You will have more synchr
 <summary>Expand this to see what it would look like</summary>
 
 ```tsx filename=app/root.tsx lines=[2,9-10,12-16,30-33,36-37]
-// existing imports
-import { useEffect, useState } from "react";
+// We no longer need useEffect 
+import { useState } from "react";
 
 // existing imports & exports
 
 export default function App() {
   const { contacts, q } = useLoaderData<typeof loader>();
   const navigation = useNavigation();
   // the query now needs to be kept in state
+  const [prevQ, setPrevQ] = useState(q);
   const [query, setQuery] = useState(q || "");
 
-  // we still have a `useEffect` to synchronize the query
-  // to the component state on back/forward button clicks
-  useEffect(() => {
+  // We can avoid using `useEffect` to synchronize the query
+  // by using a separate piece of state to store the previous
+  // value
+  if (q !== prevQ) {
+    setPrevQ(q);
     setQuery(q || "");
-  }, [q]);
+  }
 
   return (
     <html lang="en">
