From b38b40aa4ef80c698afff06e7d0a91831dccfad1 Mon Sep 17 00:00:00 2001
From: Gabriel <malukoodin2022@gmail.com>
Date: Mon, 13 Nov 2023 13:59:12 -0300
Subject: [PATCH] Removing useEffects that have no side effect and alter the
 state.

---
 components/layout/footer-menu.tsx            |  7 +------
 components/layout/navbar/mobile-menu.tsx     | 15 +++++++++++----
 components/layout/search/filter/dropdown.tsx | 19 +++++++------------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx
index 4f6387edd..c43f8f180 100644
--- a/components/layout/footer-menu.tsx
+++ b/components/layout/footer-menu.tsx
@@ -4,15 +4,10 @@ import clsx from 'clsx';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
 const FooterMenuItem = ({ item }: { item: Menu }) => {
   const pathname = usePathname();
-  const [active, setActive] = useState(pathname === item.path);
-
-  useEffect(() => {
-    setActive(pathname === item.path);
-  }, [pathname, item.path]);
+  const active = pathname === item.path;
 
   return (
     <li>
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 6d798370e..5f1fcc181 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -16,6 +16,17 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
   const openMobileMenu = () => setIsOpen(true);
   const closeMobileMenu = () => setIsOpen(false);
 
+  const [prevPathname, setPrevPathname] = useState(pathname);
+  const [prevSearchParams, setPrevSearchParams] = useState(searchParams);
+  if (prevPathname !== pathname) {
+    setPrevPathname(pathname);
+    setIsOpen(false);
+  }
+  if (!Object.is(prevSearchParams, searchParams)) {
+    setIsOpen(false);
+    setPrevSearchParams(searchParams);
+  }
+
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth > 768) {
@@ -26,10 +37,6 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
     return () => window.removeEventListener('resize', handleResize);
   }, [isOpen]);
 
-  useEffect(() => {
-    setIsOpen(false);
-  }, [pathname, searchParams]);
-
   return (
     <>
       <button
diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
index 31daa25ce..03ba6bc48 100644
--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@@ -10,10 +10,16 @@ import { FilterItem } from './item';
 export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [active, setActive] = useState('');
   const [openSelect, setOpenSelect] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
+  const active =
+    list.findLast(
+      (listItem: ListItem) => (
+        ('path' in listItem && pathname === listItem.path) ||
+        ('slug' in listItem && searchParams.get('sort') === listItem.slug)
+    ))?.title ?? '';
+  
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (ref.current && !ref.current.contains(event.target as Node)) {
@@ -25,17 +31,6 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
     return () => window.removeEventListener('click', handleClickOutside);
   }, []);
 
-  useEffect(() => {
-    list.forEach((listItem: ListItem) => {
-      if (
-        ('path' in listItem && pathname === listItem.path) ||
-        ('slug' in listItem && searchParams.get('sort') === listItem.slug)
-      ) {
-        setActive(listItem.title);
-      }
-    });
-  }, [pathname, list, searchParams]);
-
   return (
     <div className="relative" ref={ref}>
       <div