Remove useless usecallback

components/NavBar.tsx

@@ -3,7 +3,7 @@ import { DocSearch } from '@docsearch/react';
 import cn from 'classnames';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 
 const DarkModeBtn = dynamic(() => import('components/DarkModeBtn'));
@@ -47,9 +47,9 @@ const parentIdChecker = (el: HTMLElement | null): boolean => {
 
 const HeadBar = () => {
   const [showMenu, setShowMenu] = useState(false);
-  const handleClick = useCallback(() => {
+  const handleClick = () => {
     setShowMenu((showMenu) => !showMenu);
-  }, []);
+  };
 
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
@@ -57,15 +57,15 @@ const HeadBar = () => {
   /**
    * Click anywhere to close nav on mobile.
    */
-  const handleCloseNav = useCallback((e: TouchEvent) => {
+  const handleCloseNav = (e: TouchEvent) => {
     parentIdChecker(e.target as HTMLElement) || setShowMenu(false);
-  }, []);
+  };
   useEffect(() => {
     window.addEventListener('touchstart', handleCloseNav);
     return () => {
       window.removeEventListener('touchstart', handleCloseNav);
     };
-  }, [handleCloseNav]);
+  }, []);
 
   return (
     <>

components/RUA/RUACodeSandbox.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import useInView from 'lib/hooks/useInView';
 import { useTheme } from 'next-themes';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import RUALoading from './loading/RUALoading';
 
 const partten =
@@ -31,9 +31,9 @@ const RUACodeSandbox = ({ url }: Props) => {
   }, [currentTheme, embed, inView]);
 
   const [load, setLoad] = useState(false);
-  const handleLoad = useCallback(() => {
+  const handleLoad = () => {
     setLoad(true);
-  }, []);
+  };
 
   if (!isUrl) return null;
 

components/RUA/tab/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { ItemProps } from './TabItem';
 
 type Props = {
@@ -9,9 +9,9 @@ type Props = {
 
 const Tab = ({ defaultValue, children }: Props) => {
   const [currentValue, setCurrentValue] = useState(defaultValue);
-  const handleSwitch = useCallback((value: ItemProps['value']) => {
+  const handleSwitch = (value: ItemProps['value']) => {
     setCurrentValue(value);
-  }, []);
+  };
 
   // Pass current selected state to child
   const childrenWithProps = React.Children.map(children, (child) => {

components/post/PostToc.tsx

@@ -1,9 +1,9 @@
-import { getHeadings, SingleToc } from 'lib/utils';
-import Anchor from 'components/mdx/Anchor';
-import styles from './PostToc.module.css';
 import classNames from 'classnames';
-import { Fragment, useCallback, useState } from 'react';
+import Anchor from 'components/mdx/Anchor';
+import { SingleToc } from 'lib/utils';
+import { Fragment, useState } from 'react';
 import { FiChevronDown } from 'react-icons/fi';
+import styles from './PostToc.module.css';
 
 interface Props {
   toc: SingleToc[];
@@ -22,7 +22,7 @@ const TocItem = ({ item }: { item: SingleToc }) => {
 
 const PostToc = ({ toc, tocLength }: Props) => {
   const [show, setShow] = useState(false);
-  const handleClick = useCallback(() => setShow((show) => !show), []);
+  const handleClick = () => setShow((show) => !show);
 
   return (
     <>

lib/hooks/useRouterLoading.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useState, useCallback, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 /**
  * Loading state when router changed.
@@ -9,16 +9,12 @@ const useRouterLoading = () => {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
-  const handleStart = useCallback(
-    (url: string) => {
-      url !== router.pathname ? setLoading(true) : setLoading(false);
-    },
-    [router.pathname]
-  );
-
-  const handleComplete = useCallback(() => {
+  const handleStart = (url: string) => {
+    url !== router.pathname ? setLoading(true) : setLoading(false);
+  };
+  const handleComplete = () => {
     setLoading(false);
-  }, []);
+  };
 
   useEffect(() => {
     router.events.on('routeChangeStart', handleStart);