エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Hydration mismatch回避にuseEffectを使うな - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Hydration mismatch回避にuseEffectを使うな - Qiita
タイトルの通りです。 Hydration mismatch ReactなどでSSRを伴う開発をしていれば一度は遭遇したことが... タイトルの通りです。 Hydration mismatch ReactなどでSSRを伴う開発をしていれば一度は遭遇したことがあるのではないでしょうか。 SSRでレンダリングされたHTMLと、それを読み込んだクライアントが同様にレンダリングしたHTML(相当)に差異が生じた際、console上に記録されるエラーです。 例えば、以下のようなケースです。 export function App() { const now = new Date().toLocaleString(); return <p>now: {now}</p> } 少し露骨ではありますが、サーバーでレンダリングされる瞬間と、クライアントでハイドレーションされる瞬間は多くの場合で一致しないので now の値が違うぞ、となるわけです。 回避にuseEffectを使う SSR時は仮の値を表示しておいて、useEffectでマウント