From ce6b014f2047535688a0c8cca8c1322c28b44117 Mon Sep 17 00:00:00 2001 From: Adrian Bonpin Date: Mon, 27 Apr 2026 14:31:50 +0800 Subject: [PATCH] fix: use useSyncExternalStore for hydration guard to satisfy React lint rule --- components/navbar.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/navbar.tsx b/components/navbar.tsx index 7904f4e..de5fd93 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -4,7 +4,7 @@ import { AnimatePresence, motion } from "motion/react" import logo from "@/app/icon.png" import Image from "next/image" import Link from "next/link" -import { useEffect, useRef, useState } from "react" +import { useEffect, useSyncExternalStore, useRef, useState } from "react" import { Bookmark, CircleXIcon, @@ -51,8 +51,9 @@ export default function Navbar() { // Prevent hydration mismatch: useSession resolves differently on // server (isPending=true) vs client. We delay rendering the // auth-dependent UI until after the first client paint. - const [mounted, setMounted] = useState(false) - useEffect(() => setMounted(true), []) + // useSyncExternalStore avoids the React lint warning about setState in effects. + const subscribe = () => () => {} + const mounted = useSyncExternalStore(subscribe, () => true, () => false) const showAuth = mounted && !isSessionLoading // Sync search query with URL ?q= param