adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: use useSyncExternalStore for hydration guard to satisfy React lint rule

Browse Source
This commit is contained in:
adrianbonpin
2026-04-27 14:31:50 +08:00
parent 0ad8e37df1
commit ce6b014f20
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/navbar.tsx
+4 -3
View File
@@ -4,7 +4,7 @@ import { AnimatePresence, motion } from "motion/react"
import logo from "@/app/icon.png" import logo from "@/app/icon.png"
import Image from "next/image" import Image from "next/image"
import Link from "next/link" import Link from "next/link"
import { useEffect, useRef, useState } from "react" import { useEffect, useSyncExternalStore, useRef, useState } from "react"
import { import {
Bookmark, Bookmark,
CircleXIcon, CircleXIcon,
@@ -51,8 +51,9 @@ export default function Navbar() {
// Prevent hydration mismatch: useSession resolves differently on // Prevent hydration mismatch: useSession resolves differently on
// server (isPending=true) vs client. We delay rendering the // server (isPending=true) vs client. We delay rendering the
// auth-dependent UI until after the first client paint. // auth-dependent UI until after the first client paint.
const [mounted, setMounted] = useState(false) // useSyncExternalStore avoids the React lint warning about setState in effects.
useEffect(() => setMounted(true), []) const subscribe = () => () => {}
const mounted = useSyncExternalStore(subscribe, () => true, () => false)
const showAuth = mounted && !isSessionLoading const showAuth = mounted && !isSessionLoading
// Sync search query with URL ?q= param // Sync search query with URL ?q= param