removed a lot of unneeded useMemos

backend/middleware/auth.ts

@@ -46,8 +46,6 @@ const auth = async (req: RequestType, res: Response, next: NextFunction) => {
       console.log("\nAuthorization Middleware Error:", e.message);
     }
 
-    console.log("Error Authenticating", e);
-
     res.status(401).send("Error Authenticating");
   }
 };

src/components/DownloadPage/DownloadPage.tsx

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import axios from "../../axiosInterceptor";
 import {
   downloadPublicFileAPI,
   getPublicFileInfoAPI,
@@ -26,13 +25,13 @@ const PublicDownloadPage = () => {
       console.log("Error getting publicfile info", e);
       toast.error("Error getting public file");
     }
-  }, [params.id, params.tempToken, getPublicFileInfoAPI]);
+  }, [params.id, params.tempToken]);
 
-  const downloadItem = useCallback(() => {
+  const downloadItem = () => {
     const id = params.id!;
     const tempToken = params.tempToken!;
     downloadPublicFileAPI(id, tempToken);
-  }, [params.id, params.tempToken, downloadPublicFileAPI]);
+  };
 
   useEffect(() => {
     getFile();

src/components/FileInfoPopup/FileInfoPopup.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { downloadFileAPI } from "../../api/filesAPI";
 import CloseIcon from "../../icons/CloseIcon";
@@ -10,7 +10,7 @@ import { getFileColor, getFileExtension } from "../../utils/files";
 import bytes from "bytes";
 import moment from "moment";
 
-const FileInfoPopup = memo(() => {
+const FileInfoPopup = () => {
   const file = useAppSelector((state) => state.selected.popupModal.file)!;
   const dispatch = useAppDispatch();
   const {
@@ -23,34 +23,32 @@ const FileInfoPopup = memo(() => {
     ...contextMenuState
   } = useContextMenu();
 
-  const fileExtension = useMemo(
-    () => getFileExtension(file.filename, 3),
-    [file.filename]
+  const fileExtension = getFileExtension(file.filename, 3);
+
+  const imageColor = getFileColor(file.filename);
+
+  const formattedDate = useMemo(
+    () => moment(file.uploadDate).format("L"),
+    [file.uploadDate]
   );
 
-  const imageColor = useMemo(
-    () => getFileColor(file.filename),
-    [file.filename]
-  );
+  const fileSize = bytes(file.metadata.size);
 
-  const formattedDate = useMemo(() => {
-    return moment(file.uploadDate).format("L");
-  }, [file.uploadDate, moment]);
-
-  const fileSize = useMemo(() => {
-    return bytes(file.metadata.size);
-  }, [file.metadata.size, bytes]);
-
-  const closePhotoViewer = useCallback(() => {
+  const closePhotoViewer = () => {
     dispatch(resetPopupSelect());
-  }, [resetPopupSelect]);
+  };
 
   const downloadItem = () => {
     downloadFileAPI(file._id);
   };
 
-  const outterWrapperClick = (e: any) => {
-    if (e.target.id !== "outer-wrapper" || contextMenuState.selected) return;
+  const outterWrapperClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (
+      (e.target as HTMLDivElement).id !== "outer-wrapper" ||
+      contextMenuState.selected
+    ) {
+      return;
+    }
     dispatch(resetPopupSelect());
   };
 
@@ -136,6 +134,6 @@ const FileInfoPopup = memo(() => {
       </div>
     </div>
   );
-});
+};
 
 export default FileInfoPopup;

src/components/FileItem/FileItem.tsx

@@ -49,20 +49,11 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
     clickStopPropagation,
     ...contextMenuState
   } = useContextMenu();
-  const fileExtension = useMemo(
-    () => getFileExtension(file.filename, listView ? 3 : 4),
-    [file.filename]
-  );
+  const fileExtension = getFileExtension(file.filename, listView ? 3 : 4);
 
-  const imageColor = useMemo(
-    () => getFileColor(file.filename),
-    [file.filename]
-  );
+  const imageColor = getFileColor(file.filename);
 
-  const formattedFilename = useMemo(
-    () => capitalize(file.filename),
-    [file.filename]
-  );
+  const formattedFilename = capitalize(file.filename);
 
   const formattedCreatedDate = useMemo(
     () => moment(file.uploadDate).format("MM/DD/YY hh:mma"),

src/components/Files/Files.tsx

@@ -1,6 +1,6 @@
 import { useFiles } from "../../hooks/files";
 import { useUtils } from "../../hooks/utils";
-import React, { memo, useMemo } from "react";
+import React, { memo } from "react";
 import FileItem from "../FileItem/FileItem";
 import ParentBar from "../ParentBar/ParentBar";
 import classNames from "classnames";

src/components/Folders/Folders.tsx

@@ -1,6 +1,6 @@
 import { useFolders } from "../../hooks/folders";
 import FolderItem from "../FolderItem/FolderItem";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback } from "react";
 import classNames from "classnames";
 import { useUtils } from "../../hooks/utils";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
@@ -9,7 +9,7 @@ import { setSortBy } from "../../reducers/filter";
 const Folders = memo(
   ({ scrollDivRef }: { scrollDivRef: React.RefObject<HTMLDivElement> }) => {
     const { data: folders } = useFolders(false);
-    const { isHome, isTrash, isSearch } = useUtils();
+    const { isTrash, isSearch } = useUtils();
     const sortBy = useAppSelector((state) => state.filter.sortBy);
     const dispatch = useAppDispatch();
 
@@ -66,7 +66,7 @@ const Folders = memo(
       [sortBy]
     );
 
-    const title = useMemo(() => {
+    const title = (() => {
       if (isTrash) {
         return "Trash";
       } else if (isSearch) {
@@ -74,7 +74,7 @@ const Folders = memo(
       } else {
         return folders?.length === 0 ? "No Folders" : "Folders";
       }
-    }, [isHome, isTrash, isSearch, folders?.length]);
+    })();
 
     return (
       <div className="mt-8 select-none">

src/components/LoginPage/LoginPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   createAccountAPI,
   getUserAPI,
@@ -11,7 +11,6 @@ import { useAppDispatch } from "../../hooks/store";
 import { capitalize } from "lodash";
 import AlertIcon from "../../icons/AlertIcon";
 import Spinner from "../Spinner/Spinner";
-import classNames from "classnames";
 import { toast, ToastContainer } from "react-toastify";
 import Swal from "sweetalert2";
 
@@ -113,7 +112,7 @@ const LoginPage = () => {
     }
   };
 
-  const isSubmitDisabled = useMemo(() => {
+  const isSubmitDisabled = (() => {
     switch (mode) {
       case "login":
         return !email || !password;
@@ -124,7 +123,7 @@ const LoginPage = () => {
       default:
         return false;
     }
-  }, [email, password, verifyPassword, mode]);
+  })();
 
   const onSubmit = (e: any) => {
     e.preventDefault();
@@ -137,7 +136,7 @@ const LoginPage = () => {
     }
   };
 
-  const headerTitle = useMemo(() => {
+  const headerTitle = (() => {
     switch (mode) {
       case "login":
         return "Login to your account";
@@ -148,9 +147,9 @@ const LoginPage = () => {
       default:
         return "Login to your account";
     }
-  }, [mode]);
+  })();
 
-  const validationError = useMemo(() => {
+  const validationError = (() => {
     if (mode === "login" || mode === "reset") return "";
 
     if (mode === "create") {
@@ -158,7 +157,7 @@ const LoginPage = () => {
     }
 
     return "";
-  }, [mode, email, password, verifyPassword]);
+  })();
 
   useEffect(() => {
     const loggedIn = window.localStorage.getItem("hasPreviouslyLoggedIn");

src/components/Medias/Medias.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 import MediaItem from "../MediaItem/MediaItem";
 import { useFiles } from "../../hooks/files";
 import MultiSelectBar from "../MultiSelectBar/MultiSelectBar";
@@ -80,7 +80,7 @@ const Medias = memo(
       dispatch(setMediaFilter(value));
     };
 
-    const title = useMemo(() => {
+    const title = (() => {
       if (mediaFilter === "all") {
         return "Photos and Videos";
       } else if (mediaFilter === "photos") {
@@ -88,7 +88,7 @@ const Medias = memo(
       } else if (mediaFilter === "videos") {
         return "Videos";
       }
-    }, [mediaFilter]);
+    })();
 
     return (
       <div

src/components/MoverPopup/MoverPopup.tsx

@@ -97,7 +97,7 @@ const MoverPopup = () => {
     }
   };
 
-  const moveText = useMemo(() => {
+  const moveText = (() => {
     if (selectedFolder?._id && selectedFolder?.name) {
       return `Move to ${selectedFolder.name}`;
     } else if (!parent) {
@@ -106,21 +106,15 @@ const MoverPopup = () => {
       const lastParent = parentList[parentList.length - 1];
       return `Move to ${lastParent.name}`;
     }
-  }, [
-    selectedFolder?._id,
-    selectedFolder?.name,
-    parent?._id,
-    parentList[parentList.length - 1],
-    parentList.length,
-  ]);
+  })();
 
-  const headerText = useMemo(() => {
+  const headerText = (() => {
     if (parent) {
       return parent.name;
     } else {
       return "Home";
     }
-  }, [selectedFolder?.name, parent?._id]);
+  })();
 
   const onHomeClick = () => {
     setSearch("");
@@ -256,7 +250,7 @@ const MoverPopup = () => {
           )}
         </div>
         <div className="mt-4">
-          <p className="text-sm overflow-hidden text-ellipsis whitespace-nowrap">
+          <p className="text-sm overflow-hidden text-ellipsis whitespace-nowrap select-none">
             {moveText}
           </p>
         </div>

src/components/MultiSelectBar/MultiSelectBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { resetMultiSelect, setMoveModal } from "../../reducers/selected";
 import {

src/components/PhotoViewerPopup/PhotoViewerPopup.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { deleteVideoTokenAPI, getVideoTokenAPI } from "../../api/filesAPI";
 import CloseIcon from "../../icons/CloseIcon";
@@ -49,15 +49,9 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
     ...contextMenuState
   } = useContextMenu();
 
-  const fileExtension = useMemo(
-    () => getFileExtension(file.filename, 3),
-    [file.filename]
-  );
+  const fileExtension = getFileExtension(file.filename, 3);
 
-  const imageColor = useMemo(
-    () => getFileColor(file.filename),
-    [file.filename]
-  );
+  const imageColor = getFileColor(file.filename);
 
   const getVideo = useCallback(async () => {
     try {

src/components/QuickAccess/QuickAccess.tsx

@@ -1,9 +1,7 @@
-import { useSelector } from "react-redux";
 import QuickAccessItem from "../QuickAccessItem/QuickAccessItem";
-import React, { memo, useMemo, useState } from "react";
+import { memo, useState } from "react";
 import { useQuickFiles } from "../../hooks/files";
 import classNames from "classnames";
-import { useParams } from "react-router-dom";
 import { useUtils } from "../../hooks/utils";
 import ChevronOutline from "../../icons/ChevronOutline";
 

src/components/QuickAccessItem/QuickAccessItem.tsx

@@ -52,15 +52,13 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
     ...contextMenuState
   } = useContextMenu();
 
-  const fileExtension = useMemo(
-    () => getFileExtension(file.filename),
-    [file.filename]
-  );
-
-  const imageColor = useMemo(
-    () => getFileColor(file.filename),
-    [file.filename]
+  const fileExtension = getFileExtension(file.filename);
+  const imageColor = getFileColor(file.filename);
+  const formattedDate = useMemo(
+    () => moment(file.uploadDate).format("MM/DD/YY hh:mma"),
+    [file.uploadDate]
   );
+  const formattedFilename = capitalize(file.filename);
 
   const quickItemClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const multiSelectKey = e.metaKey || e.ctrlKey;
@@ -188,7 +186,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
               : "text-[#212b36]"
           )}
         >
-          {capitalize(file.filename)}
+          {formattedFilename}
         </p>
         <span
           className={classNames(
@@ -198,7 +196,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
               : "text-[#637381]"
           )}
         >
-          Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")}
+          Created {formattedDate}
         </span>
       </div>
     </div>

src/components/RightSection/RightSection.tsx

@@ -46,17 +46,14 @@ const RightSection = memo(() => {
     const date =
       selectedItem.file?.uploadDate || selectedItem.folder?.createdAt;
     return moment(date).format("L");
-  }, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt, moment]);
+  }, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt]);
 
-  const fileSize = useMemo(() => {
-    if (!selectedItem.file?.length) return 0;
-    return bytes(selectedItem.file.length);
-  }, [selectedItem?.file?.length, bytes]);
+  const fileSize = bytes(selectedItem.file?.length || 0);
 
-  const fileExtension = useMemo(() => {
+  const fileExtension = (() => {
     if (!selectedItem?.file?.filename) return null;
     return getFileExtension(selectedItem.file.filename);
-  }, [selectedItem?.file?.filename, getFileExtension]);
+  })();
 
   const {
     onContextMenu,
@@ -71,6 +68,7 @@ const RightSection = memo(() => {
   const reset = () => {
     dispatch(resetSelected());
   };
+
   const openItem = () => {
     if (selectedItem.file) {
       dispatch(setPopupSelect({ type: "file", file: selectedItem.file }));
@@ -81,7 +79,7 @@ const RightSection = memo(() => {
     }
   };
 
-  const bannerBackgroundColor = useMemo(() => {
+  const bannerBackgroundColor = (() => {
     if (selectedItem.file) {
       return getFileColor(selectedItem.file.filename);
     } else if (selectedItem.folder) {
@@ -89,9 +87,9 @@ const RightSection = memo(() => {
     } else {
       return "#3c85ee";
     }
-  }, [selectedItem.file?.filename, selectedItem.folder?.name]);
+  })();
 
-  const bannerText = useMemo(() => {
+  const bannerText = (() => {
     if (selectedItem.file) {
       return getFileExtension(selectedItem.file.filename);
     } else if (selectedItem.folder) {
@@ -99,7 +97,7 @@ const RightSection = memo(() => {
     } else {
       return "";
     }
-  }, [selectedItem.file?.filename, selectedItem.folder?.name]);
+  })();
 
   return (
     <div

src/components/SearchBar/SearchBar.tsx

@@ -95,7 +95,7 @@ const SearchBar = memo(() => {
     setShowSuggestions(true);
   };
 
-  const searchTextPlaceholder = useMemo(() => {
+  const searchTextPlaceholder = (() => {
     if (isMedia) {
       return "Search Media";
     } else if (isTrash) {
@@ -103,7 +103,7 @@ const SearchBar = memo(() => {
     } else {
       return "Search";
     }
-  }, [isMedia, isTrash]);
+  })();
 
   return (
     <form

src/components/SearchBarItem/SearchBarItem.tsx

@@ -1,6 +1,5 @@
 import { FileInterface } from "../../types/file";
 import { FolderInterface } from "../../types/folders";
-import { useMemo } from "react";
 import { getFileColor, getFileExtension } from "../../utils/files";
 
 interface SearchBarItemProps {
@@ -13,15 +12,10 @@ interface SearchBarItemProps {
 
 const SearchBarItem = (props: SearchBarItemProps) => {
   const { type, folder, file, fileClick, folderClick } = props;
-  const fileExtension = useMemo(
-    () => getFileExtension(file?.filename || "", 3),
-    [file?.filename]
-  );
 
-  const imageColor = useMemo(
-    () => getFileColor(file?.filename || ""),
-    [file?.filename]
-  );
+  const fileExtension = file ? getFileExtension(file.filename, 3) : "";
+
+  const imageColor = file ? getFileColor(file.filename) : "";
 
   if (type === "folder" && folder) {
     return (

src/components/SettingsPage/SettingsChangePasswordPopup.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import CloseIcon from "../../icons/CloseIcon";
 import classNames from "classnames";
 import { toast } from "react-toastify";
@@ -16,7 +16,7 @@ const SettingsChangePasswordPopup: React.FC<
   const [verifyNewPassword, setVerifyNewPassword] = useState("");
   const [loadingChangePassword, setLoadingChangePassword] = useState(false);
 
-  const inputDisabled = useMemo(() => {
+  const inputDisabled = (() => {
     if (
       loadingChangePassword ||
       currentPassword.length === 0 ||
@@ -35,9 +35,9 @@ const SettingsChangePasswordPopup: React.FC<
     }
 
     return false;
-  }, [currentPassword, newPassword, verifyNewPassword, loadingChangePassword]);
+  })();
 
-  const errorMessage = useMemo(() => {
+  const errorMessage = (() => {
     if (newPassword.length === 0) {
       return "";
     }
@@ -51,7 +51,7 @@ const SettingsChangePasswordPopup: React.FC<
     }
 
     return "";
-  }, [newPassword, verifyNewPassword]);
+  })();
 
   const submitPasswordChange = async (e: any) => {
     e.preventDefault();

src/components/SharePopup/SharePopup.tsx

@@ -21,7 +21,6 @@ import {
   setShareModal,
 } from "../../reducers/selected";
 import { toast } from "react-toastify";
-import getBackendURL from "../../utils/getBackendURL";
 
 const SharePopup = memo(() => {
   const file = useAppSelector((state) => state.selected.shareModal.file)!;
@@ -31,23 +30,16 @@ const SharePopup = memo(() => {
   const { invalidateFilesCache } = useFilesClient();
   const { invalidateQuickFilesCache } = useQuickFilesClient();
 
-  const imageColor = useMemo(
-    () => getFileColor(file.filename),
-    [file.filename]
+  const imageColor = getFileColor(file.filename);
+
+  const fileExtension = getFileExtension(file.filename, 3);
+
+  const formattedDate = useMemo(
+    () => moment(file.uploadDate).format("MM/DD/YYYY"),
+    [file.uploadDate]
   );
 
-  const fileExtension = useMemo(
-    () => getFileExtension(file.filename, 3),
-    [file.filename]
-  );
-
-  const formattedDate = useMemo(() => {
-    return moment(file.uploadDate).format("MM/DD/YYYY");
-  }, [file.uploadDate, moment]);
-
-  const fileSize = useMemo(() => {
-    return bytes(file.length);
-  }, [file.length, bytes]);
+  const fileSize = bytes(file.length);
 
   const makePublic = async () => {
     try {
@@ -156,11 +148,9 @@ const SharePopup = memo(() => {
 
   useEffect(() => {
     if (!file.metadata.link) return;
-    const url = `${getBackendURL()}/public-download/${file._id}/${
-      file.metadata.link
-    }`;
+    const url = `${window.location.origin}/public-download/${file._id}/${file.metadata.link}`;
     setShareLink(url);
-  }, [file.metadata.link]);
+  }, [file._id, file.metadata.link]);
 
   return (
     <div

src/components/Uploader/Uploader.tsx

@@ -12,7 +12,7 @@ const Uploader = memo(() => {
   const dispatch = useAppDispatch();
 
   const toggleMinimize = () => {
-    setMinimized(!minimized);
+    setMinimized((val) => !val);
   };
 
   const uploadTitle = useMemo(() => {

src/hooks/utils.ts

@@ -1,39 +1,25 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 
 export const useUtils = () => {
   const location = useLocation();
 
-  const isHome = useMemo(() => {
-    return location.pathname === "/home";
-  }, [location.pathname]);
+  const isHome = location.pathname === "/home";
 
-  const isTrash = useMemo(() => {
-    return (
-      location.pathname === "/trash" ||
-      location.pathname.includes("/folder-trash") ||
-      location.pathname.includes("/search-trash")
-    );
-  }, [location.pathname]);
+  const isTrash =
+    location.pathname === "/trash" ||
+    location.pathname.includes("/folder-trash") ||
+    location.pathname.includes("/search-trash");
 
-  const isMedia = useMemo(() => {
-    return (
-      location.pathname === "/media" ||
-      location.pathname.includes("/search-media")
-    );
-  }, [location.pathname]);
+  const isMedia =
+    location.pathname === "/media" ||
+    location.pathname.includes("/search-media");
 
-  const isSettings = useMemo(() => {
-    return location.pathname === "/settings";
-  }, [location.pathname]);
+  const isSettings = location.pathname === "/settings";
 
-  const isHomeFolder = useMemo(() => {
-    return location.pathname.includes("/folder/");
-  }, [location.pathname]);
+  const isHomeFolder = location.pathname.includes("/folder/");
 
-  const isSearch = useMemo(() => {
-    return location.pathname.includes("/search/");
-  }, [location.pathname]);
+  const isSearch = location.pathname.includes("/search/");
 
   return { isHome, isTrash, isMedia, isSettings, isHomeFolder, isSearch };
 };