Merge pull request #132 from thundermiracle/useCallback

add useCallback to improve performance
thundermiracle · Sep 18, 2019 · d853773 · d853773
2 parents 55848cb + 9dd5b77
commit d853773
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,7 +1,7 @@
 {
   "parser": "babel-eslint",
   "extends": ["airbnb", "plugin:react/recommended", "prettier", "prettier/react"],
-  "plugins": ["jest"],
+  "plugins": ["jest", "react-hooks"],
   "env": {
     "browser": true,
     "es6": true,
@@ -41,7 +41,9 @@
     "react/prefer-stateless-function": 1,
     "react/prop-types": 2,
     "react/react-in-jsx-scope": 0,
-    "react/jsx-props-no-spreading": 0
+    "react/jsx-props-no-spreading": 0,
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": 2
   },
   "settings": {
     "import/resolver": {

diff --git a/src/components/Layout/LanguageBar.js b/src/components/Layout/LanguageBar.js
@@ -18,9 +18,9 @@ import './LanguageBar.css';
 function LanguageBar({ lang: langKey }) {
   const [displayLang, toggleDisplayLang] = useState(false);
 
-  function handleToggleLanguage() {
+  const handleToggleLanguage = React.useCallback(() => {
     toggleDisplayLang(!displayLang);
-  }
+  }, [displayLang]);
 
   let toggleStyle = {
     maxHeight: null,

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -15,7 +15,7 @@ function Layout({ children, location, title, breadcrumbs }) {
 
   React.useEffect(() => {
     refresh(location);
-  }, [location.pathname]);
+  }, [location, refresh]);
 
   return (
     <div

diff --git a/src/context/LanguageContext.js b/src/context/LanguageContext.js
@@ -22,20 +22,23 @@ function LanguageProvider({ children }) {
   const [homeLink, setHomeLink] = React.useState(initValues.homeLink);
   const [messages, setMessages] = React.useState(initValues.messages);
 
-  function refresh(location = window.location) {
-    if (supportedLanguages != null && Object.keys(supportedLanguages).length > 1) {
-      // const url = location.pathname;
-      const url = location.pathname == null ? window.location.pathname : location.pathname;
+  const refresh = React.useCallback(
+    (location = window.location) => {
+      if (supportedLanguages != null && Object.keys(supportedLanguages).length > 1) {
+        // const url = location.pathname;
+        const url = location.pathname == null ? window.location.pathname : location.pathname;
 
-      const currentLang = getCurrentLangKey(Object.keys(supportedLanguages), defaultLang, url);
-      const currentHomeLink = `/${currentLang}/`.replace(`/${defaultLang}/`, '/');
-      const currentMessages = loadMessage(currentLang);
+        const currentLang = getCurrentLangKey(Object.keys(supportedLanguages), defaultLang, url);
+        const currentHomeLink = `/${currentLang}/`.replace(`/${defaultLang}/`, '/');
+        const currentMessages = loadMessage(currentLang);
 
-      setLang(currentLang);
-      setHomeLink(currentHomeLink);
-      setMessages(currentMessages);
-    }
-  }
+        setLang(currentLang);
+        setHomeLink(currentHomeLink);
+        setMessages(currentMessages);
+      }
+    },
+    [defaultLang],
+  );
 
   return (
     <LanguageContext.Provider

diff --git a/src/utils/i18n.js b/src/utils/i18n.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useLang } from 'context/LanguageContext';
 import { formatPostDate } from 'utils/helpers';