cat ./posts/usesyncexternalstore-hydration-safe-ui.ja.md
# React 19のeslintが出す「Calling setState synchronously within an effect」警告を、setTimeoutで默らせるのではなくuseSyncExternalStoreで根本から解消するパターンを、実例3つ（マウント判定・hostname・localStorage）で解説します。
まだコメントはありません。
SSRするReactアプリで、こんなコードを書いたことはないでしょうか。
const [mounted, setMounted] = useState(false);useEffect(() => { setMounted(true); // ⚠ Calling setState synchronously within an effect}, []);// mounted が true になってから広告やウィジェットを描画
hydration mismatchを避けるための定番テクニックですが、React 19世代のeslint（react-hooks v6）はこれにエラーを出します。マウント直後に必ず2回目の描画が走る（カスケードレンダリング）からです。
setTimeoutで包んで警告を默らせることはできますが、それは警告の意図を殺すだけ。正解は useSyncExternalStore です。
import { useSyncExternalStore } from "react"; const subscribeNoop = () => () => {}; export function useHydrated() { return useSyncExternalStore( subscribeNoop, // 購読不要（値は二度と変わらない） () => true, // クライアントsnapshot () => false, // サーバーsnapshot );}
サーバーではfalse、hydration完了後のクライアントではtrue。useState + useEffectと同じ振る舞いを、setStateなしで実現できます。Reactが「hydration中はサーバーsnapshot、その後クライアントsnapshot」を保証してくれるのでmismatchも起きません。
「サーバーではデフォルト値、クライアントでは window の実値」も同じ形で書けます:
const allowlistHost = useSyncExternalStore( subscribeNoop, () => window.location.hostname || "example.com", () => "example.com",);
useStateの初期値 + useEffectで上書き、という定番の2ステップが1式になります。
書き込みもある場合は、小さなストアを作ります。ポイントは「書いたら購読者に通知」と、プライベートモードでlocalStorageが例外を投げるケースのセッション内フラグです:
const listeners = new Set<() => void>();let sessionHidden = false; // 保存できない環境でもこの表示中は隠す function subscribeConsent(listener: () => void) { listeners.add(listener); return () => listeners.delete(listener);} function readBannerVisible() { if (sessionHidden) return false; try { return localStorage.getItem("consent") !== "accepted"; } catch { return true; // 読めない環境では表示しておく }} function hideBanner(persist: () => void) { try { persist(); } catch {} sessionHidden = true; for (const l of listeners) l(); // 購読者に再描画を促す} export function CookieConsent() { const visible = useSyncExternalStore(subscribeConsent, readBannerVisible, () => false); if (!visible) return null; return <button onClick={() => hideBanner(() => localStorage.setItem("consent", "accepted"))}>OK</button>;}
useState版と違い、「状態の源泉はlocalStorageである」という事実がコードの構造にそのまま現れます。
認証直後のフルリロードなど、意図的にlintルールを破る場所は「理由をコメントに書いて1行だけdisable」が原則です:
// Full reload on purpose: the admin console is server-rendered from the// session cookie, so client navigation could show stale auth state.// eslint-disable-next-line @next/next/no-location-assign-relative-destinationwindow.location.href = new URL("/admin", window.location.origin).href;
• 「マウント後だけ表示」はuseState+useEffectではなくuseSyncExternalStoreで
• windowやlocalStorageは「外部ストアの購読」としてモデリングすると警告もmismatchも消える
• 書き込みがある場合はSetのlistenersと通知関数で小さなストアを作る
• lintを默らせるのではなく、設計を警告の意図に合わせる
Turnstile site key が未設定のため、このフォームは送信できません。管理者は NEXT_PUBLIC_TURNSTILE_SITE_KEY を設定してください。