Update useCallback

Author: MetaCorp

frontend/src/components/auth/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 import { Formik, FormikActions } from 'formik'
 
 import TextField from '@material-ui/core/TextField'
@@ -47,30 +47,30 @@ const Login: React.FC<Props> = () => {
   const { history } = useReactRouter()
   const [error, setError] = useState<string>()
 
-  const handleSubmit = (
-    values: FormValues,
-    { setSubmitting }: FormikActions<FormValues>,
-  ) => {
-    setError(undefined)
-    loginMutation({
-      variables: {
-        email: values.email,
-        password: values.password,
-      },
-    })
-      .then((res) => {
-        if (!res.data) return
-        // console.log('login success: ', res.data.login)
-
-        localStorage.setItem('token', res.data.login.token)
-        history.push('/')
-      })
-      .catch((e) => {
-        console.error(e)
-        setError(e.message)
-        setSubmitting(false)
+  const handleSubmit = useCallback(
+    (values: FormValues, { setSubmitting }: FormikActions<FormValues>) => {
+      setError(undefined)
+      loginMutation({
+        variables: {
+          email: values.email,
+          password: values.password,
+        },
       })
-  }
+        .then((res) => {
+          if (!res.data) return
+          // console.log('login success: ', res.data.login)
+
+          localStorage.setItem('token', res.data.login.token)
+          history.push('/')
+        })
+        .catch((e) => {
+          console.error(e)
+          setError(e.message)
+          setSubmitting(false)
+        })
+    },
+    [history, loginMutation],
+  )
 
   return (
     <Box

frontend/src/components/auth/Signup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 import { Formik, FormikActions } from 'formik'
 
 import TextField from '@material-ui/core/TextField'
@@ -52,31 +52,31 @@ const Signup: React.FC<Props> = () => {
   const { history } = useReactRouter()
   const [error, setError] = useState<string>()
 
-  const handleSubmit = (
-    values: FormValues,
-    { setSubmitting }: FormikActions<FormValues>,
-  ) => {
-    setError(undefined)
-    signupMutation({
-      variables: {
-        name: values.name,
-        email: values.email,
-        password: values.password,
-      },
-    })
-      .then((res) => {
-        if (!res.data) throw Error()
-        // console.log('signup success: ', res.data.login)
-
-        localStorage.setItem('token', res.data.signup.token)
-        history.push('/')
-      })
-      .catch((e) => {
-        console.error(e)
-        setError(e.message)
-        setSubmitting(false)
+  const handleSubmit = useCallback(
+    (values: FormValues, { setSubmitting }: FormikActions<FormValues>) => {
+      setError(undefined)
+      signupMutation({
+        variables: {
+          name: values.name,
+          email: values.email,
+          password: values.password,
+        },
       })
-  }
+        .then((res) => {
+          if (!res.data) throw Error()
+          // console.log('signup success: ', res.data.login)
+
+          localStorage.setItem('token', res.data.signup.token)
+          history.push('/')
+        })
+        .catch((e) => {
+          console.error(e)
+          setError(e.message)
+          setSubmitting(false)
+        })
+    },
+    [history, signupMutation],
+  )
 
   return (
     <Box

frontend/src/components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton'
@@ -56,24 +56,27 @@ const Header: React.FC<Props> = ({ isDrawerOpen, onDrawerOpen, isMobile }) => {
 
   const { history } = useReactRouter()
 
-  const handleMenuOpen = (e: any) => {
-    setMenuAnchorEl(e.currentTarget)
-  }
+  const handleMenuOpen = useCallback(
+    (e: any) => {
+      setMenuAnchorEl(e.currentTarget)
+    },
+    [setMenuAnchorEl],
+  )
 
-  const handleMenuClose = () => {
+  const handleMenuClose = useCallback(() => {
     setMenuAnchorEl(null)
-  }
+  }, [setMenuAnchorEl])
 
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
     handleMenuClose()
     localStorage.removeItem('token')
     history.push('/login')
-  }
+  }, [handleMenuClose, history])
 
-  const handleToProfile = () => {
+  const handleToProfile = useCallback(() => {
     handleMenuClose()
     history.push('/profile')
-  }
+  }, [handleMenuClose, history])
 
   return (
     <AppBar