Bug 1849880 - Save to Pocket fixing eslint dependencies warning around useEffect. r=gvn

Differential Revision: https://phabricator.services.mozilla.com/D186975

Author: ScottDowne

browser/components/pocket/content/panels/css/main.compiled.css

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import Header from "../Header/Header";
 import ArticleList from "../ArticleList/ArticleList";
 import PopularTopics from "../PopularTopics/PopularTopics";
@@ -19,6 +19,7 @@ function Home(props) {
     utmCampaign,
     utmContent,
   } = props;
+
   const [{ articles, status }, setArticlesState] = useState({
     articles: [],
     // Can be success, loading, or error.
@@ -31,41 +32,47 @@ function Home(props) {
       : ``
   }`;
 
+  const loadingRecentSaves = useCallback(resp => {
+    setArticlesState(prevState => ({
+      ...prevState,
+      status: "loading",
+    }));
+  }, []);
+
+  const renderRecentSaves = useCallback(resp => {
+    const { data } = resp;
+
+    if (data.status === "error") {
+      setArticlesState(prevState => ({
+        ...prevState,
+        status: "error",
+      }));
+      return;
+    }
+
+    setArticlesState({
+      articles: data,
+      status: "success",
+    });
+  }, []);
+
   useEffect(() => {
     if (!hideRecentSaves) {
       // We don't display the loading message until instructed. This is because cache
       // loads should be fast, so using the loading message for cache just adds loading jank.
       panelMessaging.addMessageListener(
         "PKT_loadingRecentSaves",
-        function (resp) {
-          setArticlesState({
-            articles,
-            status: "loading",
-          });
-        }
+        loadingRecentSaves
       );
 
       panelMessaging.addMessageListener(
         "PKT_renderRecentSaves",
-        function (resp) {
-          const { data } = resp;
-
-          if (data.status === "error") {
-            setArticlesState({
-              articles: [],
-              status: "error",
-            });
-            return;
-          }
-
-          setArticlesState({
-            articles: data,
-            status: "success",
-          });
-        }
+        renderRecentSaves
       );
     }
+  }, [hideRecentSaves, loadingRecentSaves, renderRecentSaves]);
 
+  useEffect(() => {
     // tell back end we're ready
     panelMessaging.sendMessage("PKT_show_home");
   }, []);

browser/components/pocket/content/panels/js/components/Home/Home.jsx

@@ -290,37 +290,38 @@ function Home(props) {
     status: ""
   });
   const utmParams = `utm_source=${utmSource}${utmCampaign && utmContent ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` : ``}`;
+  const loadingRecentSaves = (0,react.useCallback)(resp => {
+    setArticlesState(prevState => ({ ...prevState,
+      status: "loading"
+    }));
+  }, []);
+  const renderRecentSaves = (0,react.useCallback)(resp => {
+    const {
+      data
+    } = resp;
+
+    if (data.status === "error") {
+      setArticlesState(prevState => ({ ...prevState,
+        status: "error"
+      }));
+      return;
+    }
+
+    setArticlesState({
+      articles: data,
+      status: "success"
+    });
+  }, []);
   (0,react.useEffect)(() => {
     if (!hideRecentSaves) {
       // We don't display the loading message until instructed. This is because cache
       // loads should be fast, so using the loading message for cache just adds loading jank.
-      messages.addMessageListener("PKT_loadingRecentSaves", function (resp) {
-        setArticlesState({
-          articles,
-          status: "loading"
-        });
-      });
-      messages.addMessageListener("PKT_renderRecentSaves", function (resp) {
-        const {
-          data
-        } = resp;
-
-        if (data.status === "error") {
-          setArticlesState({
-            articles: [],
-            status: "error"
-          });
-          return;
-        }
-
-        setArticlesState({
-          articles: data,
-          status: "success"
-        });
-      });
-    } // tell back end we're ready
-
-
+      messages.addMessageListener("PKT_loadingRecentSaves", loadingRecentSaves);
+      messages.addMessageListener("PKT_renderRecentSaves", renderRecentSaves);
+    }
+  }, [hideRecentSaves, loadingRecentSaves, renderRecentSaves]);
+  (0,react.useEffect)(() => {
+    // tell back end we're ready
     messages.sendMessage("PKT_show_home");
   }, []);
   let recentSavesSection = null;