refactor(ui): use hydration-safe dropdown mount check

Author: DongDuong2001

src/components/layout/products-dropdown-client.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { ProductsDropdown } from "./products-dropdown";
 
-export function ProductsDropdownClient() {
-  const [mounted, setMounted] = useState(false);
+const emptySubscribe = () => () => {};
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+export function ProductsDropdownClient() {
+  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
 
   if (!mounted) {
     return null;