Reactでハイドレーションエラーが発生する主な原因はどれですか？

解説

正解はサーバーとクライアントのレンダリング結果が一致しないです。ハイドレーションとは、SSR（Server-Side Rendering）でサーバーが生成したHTMLに対して、ブラウザ上のReactがイベント処理や状態管理を結び付け、操作できる画面として有効化する処理です。このとき、サーバーが出力したHTMLと、ブラウザでReactが最初にレンダリングした結果が異なると、Reactはハイドレーションエラーや警告を報告します。代表的な原因は、Math.random()、Date、現在時刻、ロケール依存の日付表示など、サーバーとクライアントで異なる値になり得る処理をレンダリング中に実行することです。また、window、localStorage、navigatorなどのブラウザ専用APIを使い、サーバーとクライアントで初回表示の内容が変わる場合も不一致の原因になります。useStateやuseEffectを使うこと自体はエラーの原因ではありません。特にuseEffectは初回のハイドレーション後に実行されるため、ブラウザ専用APIを扱う処理を移す方法として使えます。SSRでは、サーバーとクライアントの初回レンダリング結果を同じに保ち、クライアントでのみ必要な処理はハイドレーション後に実行することが重要です。