issue fix: rendered more hooks than previous render

MrRajatSharma · Aug 27, 2020 · 1955db2 · 1955db2
1 parent b30dde0
commit 1955db2
Showing 1 changed file with 22 additions and 23 deletions.
diff --git a/packages/frontend/src/components/HomePage.js b/packages/frontend/src/components/HomePage.js
@@ -23,35 +23,34 @@ export default () => {
   const { loading, error, data } = useQuery(LIST_QUERY);
   const [items, setItems] = useState([]);
 
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error :(</p>;
-
   useEffect(() => {
     console.log("data", data);
     if (data) {
-      const items = data && data.list.list.map((tweet, index) => {
-        return (
-          <li
-            key={`tweet-${tweet.id}`}
-            className="grid-item"
-            style={{
-              width: 200,
-              // marginBottom: 20
-            }}
-          >
-            <div>
-              <h3>{tweet.id}</h3>
-              <h3>{tweet.user}</h3>
-              {/* <em>{tweet.createdAt}</em> */}
-              <p>{tweet.title}</p>
-            </div>
-          </li>
-        );
-      });
-      setItems(items);
+      const newItems = data.list.list.map((tweet, index) => (
+        <li
+          key={`tweet-${tweet.id}`}
+          className="grid-item"
+          style={{
+            width: 200,
+            // marginBottom: 20
+          }}
+        >
+          <div>
+            <h3>{tweet.id}</h3>
+            <h3>{tweet.user}</h3>
+            {/* <em>{tweet.createdAt}</em> */}
+            <p>{tweet.title}</p>
+          </div>
+        </li>
+      ));
+      setItems(newItems);
     }
   }, [data]);
 
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :(</p>;
+
+
   const getQueryParams = () => {
     return {  }
   }