React で img に loading=”lazy” を付けて遅延読み込みし、onLoad と onError で読み込み中の表示を出す方法です。width・height、key での作り直し、ハイドレーシ ...

React Server Components では、’use client’ を書いたファイルが境目になり、そこから import したものはすべてブラウザへ送られます。Next.js 16 で、送られるコー ...

Intl.DateTimeFormatで言語やタイムゾーンを省くと、サーバーとブラウザで日付の文字が変わり、ハイドレーションエラーになります。両方を指定する書き方と、閲覧者のタイムゾーンで出す書き方を検証環境で確かめました。

お問い合わせフォームなどの入力をlocalStorageに自動保存し、再読み込みやタブを閉じたあとも下書きを戻す方法です。読み込みはuseStateの初期化関数、書き出しはuseEffectで行い、壊れた値や容量不足でも止まらない書き ...

React 19では、サーバーのHTMLとブラウザの描画が食い違うと、エラーが1件にまとまり、どの部品のどの値が違うかが差分で出ます。同じ食い違いをReact 18と19で描き、出たエラーを並べて比べました。

入力欄の部品で id を決め打ちにすると、同じ部品を2つ置いたときに id が重なり、2つ目のラベルを押しても1つ目の入力欄にフォーカスが移ります。useId で部品ごとに id を作り、ラベルや説明文と結びつける書き方と、数を数えて ...

react-dom の preload はファイルを先にダウンロードするだけで、preinit は実行や適用まで進めます。head に入る要素、precedence の順番、クリックで読み込みを始める効果、サーバーでの出力を確かめまし ...

React 19では、ページの部品の中に書いたtitle・meta・linkを、Reactがheadへ移してくれます。SEOのために、検索結果に出るタイトルや説明文をページごとに書き分けたいときに使えます。ページの切り替え、2か所で書 ...

React の外にあるストアを useSyncExternalStore で読むと、Transition の描画中にストアが変わっても、画面の値がそろいます。useEffect で購読する書き方と比べ、3つの引数の落とし穴も確かめまし ...