fix: links rerender when switching category

components/Links/Links.tsx

@@ -6,7 +6,6 @@ import LinkItem from "./LinkItem";
 import styles from "./links.module.scss";
 
 export default function Links({ category }: { category: Category }) {
-  console.log("render", category);
   if (category === null) {
     return (
       <div className={styles["no-category"]}>

components/SideMenu/Categories/CategoryItem.tsx

@@ -32,8 +32,8 @@ export default function CategoryItem({
   }, [category.id, categoryActive.id]);
 
   return (
-    <li className={className} ref={ref}>
+    <li className={className} ref={ref} onClick={onClick}>
-      <div className={styles["content"]} onClick={onClick}>
+      <div className={styles["content"]}>
         <span className={styles["name"]}>{category.name}</span>
         <span className={styles["links-count"]}>— {category.links.length}</span>
       </div>

components/SideMenu/SideMenu.tsx

@@ -1,4 +1,3 @@
-import { Session } from "next-auth";
 import LinkTag from "next/link";
 
 import BlockWrapper from "../BlockWrapper/BlockWrapper";
@@ -15,14 +14,12 @@ interface SideMenuProps {
   favorites: Link[];
   handleSelectCategory: (category: Category) => void;
   categoryActive: Category;
-  session: Session;
 }
 export default function SideMenu({
   categories,
   favorites,
   handleSelectCategory,
   categoryActive,
-  session,
 }: SideMenuProps) {
   return (
     <div className={styles["side-menu"]}>
@@ -40,7 +37,7 @@ export default function SideMenu({
         <MenuControls categoryActive={categoryActive} />
       </BlockWrapper>
       <BlockWrapper>
-        <UserCard session={session} />
+        <UserCard />
       </BlockWrapper>
     </div>
   );

components/SideMenu/UserCard/UserCard.tsx

@@ -1,21 +1,21 @@
-import { Session } from "next-auth";
+import { signOut, useSession } from "next-auth/react";
-import { signOut } from "next-auth/react";
 import Image from "next/image";
 import { FiLogOut } from "react-icons/fi";
 
 import styles from "./user-card.module.scss";
 
-export default function UserCard({ session }: { session: Session }) {
+export default function UserCard() {
+  const { data } = useSession({ required: true });
   return (
     <div className={styles["user-card-wrapper"]}>
       <div className={styles["user-card"]}>
         <Image
-          src={session.user.image}
+          src={data.user.image}
           width={28}
           height={28}
-          alt={`${session.user.name}'s avatar`}
+          alt={`${data.user.name}'s avatar`}
         />
-        {session.user.name}
+        {data.user.name}
       </div>
       <button
         onClick={() => signOut({ callbackUrl: "/signin" })}

next.config.js

@@ -1,17 +1,18 @@
 /** @type {import('next').NextConfig} */
 const config = {
-	webpack(config) {
+  webpack(config) {
-		config.module.rules.push({
+    config.module.rules.push({
-			test: /\.svg$/,
+      test: /\.svg$/,
-			use: ["@svgr/webpack"],
+      use: ["@svgr/webpack"],
-		});
+    });
 
-		return config;
+    return config;
-	},
+  },
-	images: {
+  images: {
-		domains: ["localhost", "t3.gstatic.com", "lh3.googleusercontent.com"],
+    domains: ["localhost", "t3.gstatic.com", "lh3.googleusercontent.com"],
-		formats: ["image/webp"],
+    formats: ["image/webp"],
-	},
+  },
+  reactStrictMode: false,
 };
 
 module.exports = config;

pages/index.tsx

@@ -1,12 +1,10 @@
-import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 import { useState } from "react";
 
 import Links from "../components/Links/Links";
 import SideMenu from "../components/SideMenu/SideMenu";
 
 import { Category, Link } from "../types";
-
-import { useRouter } from "next/router";
 import { prisma } from "../utils/back";
 import { BuildCategory } from "../utils/front";
 
@@ -18,7 +16,6 @@ interface HomeProps {
 
 function Home({ categories, favorites, currentCategory }: HomeProps) {
   const router = useRouter();
-  const { data } = useSession({ required: true });
 
   const [categoryActive, setCategoryActive] = useState<Category | null>(
     currentCategory || categories?.[0]
@@ -26,7 +23,12 @@ function Home({ categories, favorites, currentCategory }: HomeProps) {
 
   const handleSelectCategory = (category: Category) => {
     setCategoryActive(category);
-    router.push(`/?categoryId=${category.id}`);
+    const newUrl = `/?categoryId=${category.id}`;
+    window.history.replaceState(
+      { ...window.history.state, as: newUrl, url: newUrl },
+      "",
+      newUrl
+    );
   };
 
   return (
@@ -36,7 +38,6 @@ function Home({ categories, favorites, currentCategory }: HomeProps) {
         favorites={favorites}
         handleSelectCategory={handleSelectCategory}
         categoryActive={categoryActive}
-        session={data}
       />
       <Links category={categoryActive} />
     </div>