From 273129d11a932708f6ddd218bf308871815bd314 Mon Sep 17 00:00:00 2001
From: Nedal <73669345+cipherlogs@users.noreply.github.com>
Date: Sat, 25 Feb 2023 21:33:30 -0100
Subject: [PATCH 1/2] Refactor data flow to adhere to React best practices

This commit refactors the data flow in the React codebase to follow best practices recommended by the React documentation. The changes ensure that data flows from the parent components to their children, and avoid updating the state of parent components in child component effects.

The Parent component is now responsible for fetching the data and passing it down to the Child component as a prop. The Child component no longer fetches the data or modifies the state of the Parent component, ensuring a predictable data flow and avoiding the introduction of side effects.

These changes improve the maintainability and scalability of the codebase, making it easier to debug and extend in the future.
---
 .../learn/you-might-not-need-an-effect.md     | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/beta/src/content/learn/you-might-not-need-an-effect.md b/beta/src/content/learn/you-might-not-need-an-effect.md
index 6b4f75931b3..cda2bb0334d 100644
--- a/beta/src/content/learn/you-might-not-need-an-effect.md
+++ b/beta/src/content/learn/you-might-not-need-an-effect.md
@@ -597,13 +597,18 @@ function Parent() {
 }
 
 function Child({ onFetched }) {
-  const data = useSomeAPI();
   // 🔴 Avoid: Passing data to the parent in an Effect
   useEffect(() => {
-    if (data) {
-      onFetched(data);
+    async function fetchData() {
+      const data = await useSomeAPI();
+      if (data) {
+        onFetched(data);
+      }
     }
-  }, [onFetched, data]);
+    
+    fetchData();
+  }, [onFetched]);
+  
   // ...
 }
 ```
@@ -612,7 +617,17 @@ In React, data flows from the parent components to their children. When you see
 
 ```js {4-5}
 function Parent() {
-  const data = useSomeAPI();
+  const [data, setData] = useState(null);
+  
+  useEffect(() => {
+    async function fetchData() {
+      const fetchedData = await useSomeAPI();
+      setData(fetchedData);
+    }
+
+    fetchData();
+  }, []);
+  
   // ...
   // ✅ Good: Passing data down to the child
   return <Child data={data} />;

From f605644a8ee37c756079ca66f3ef9d8ad80edfad Mon Sep 17 00:00:00 2001
From: Nedal <73669345+cipherlogs@users.noreply.github.com>
Date: Sat, 25 Feb 2023 22:29:33 -0100
Subject: [PATCH 2/2] Refactor async with promises to make the example easy to
 understand

---
 .../learn/you-might-not-need-an-effect.md     | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/beta/src/content/learn/you-might-not-need-an-effect.md b/beta/src/content/learn/you-might-not-need-an-effect.md
index cda2bb0334d..768262599f6 100644
--- a/beta/src/content/learn/you-might-not-need-an-effect.md
+++ b/beta/src/content/learn/you-might-not-need-an-effect.md
@@ -597,16 +597,19 @@ function Parent() {
 }
 
 function Child({ onFetched }) {
+
   // 🔴 Avoid: Passing data to the parent in an Effect
   useEffect(() => {
-    async function fetchData() {
-      const data = await useSomeAPI();
-      if (data) {
+    let canRun = true;
+    
+    useSomeAPI().then(data => {
+      if (data && canRun) {
         onFetched(data);
       }
-    }
+    });
     
-    fetchData();
+    // clean up
+    return () => (canRun = false);
   }, [onFetched]);
   
   // ...
@@ -620,12 +623,16 @@ function Parent() {
   const [data, setData] = useState(null);
   
   useEffect(() => {
-    async function fetchData() {
-      const fetchedData = await useSomeAPI();
-      setData(fetchedData);
-    }
-
-    fetchData();
+    let canRun = true;
+    
+    useSomeAPI().then(fetchedData => {
+      if (fetchedData && canRun) {
+        setData(fetchedData);
+      }
+    });
+    
+    // clean up
+    return () => (canRun = false);
   }, []);
   
   // ...