2秒ごとにサーバーへ問い合わせる画面で、別のタブを見ているあいだは問い合わせを止め、戻った瞬間に1回問い合わせ直すフックを作りました。setInterval のままの書き方や、TanStack Query の設定による違いも、Chro ...

ブラウザのネットワークが切れたら「13:19 からオフラインです」と出し、つながったら「オンラインに戻りました」を3秒だけ出す表示を React で作りました。navigator.onLine が true でもサーバーに届かない場合 ...

サイトのメインの色を、利用者がラジオボタンで選べるようにする React のコードです。色は CSS 変数1つにまとめて localStorage に保存し、再読み込みのときに前の色が一瞬出ないよう、head の小さなスクリプトで戻し ...

ボタンを押すと、グラフなどの要素を全画面で表示し、もう一度押すと元に戻すフックを作りました。Esc キーで抜けたときに表示がずれない状態の持ち方、クリックから時間がたつと拒否される条件、全画面の中でポータルが見えなくなる点も確かめてい ...

「保存しました」のようなトースト通知を、ライブラリを使わずにReactで作る方法です。どこからでも呼べるtoast()、一定時間で消すタイマー、マウスやフォーカスで止める処理、読み上げ用の領域、モーダルのdialogとの関係を確かめま ...

OS がダークモードかどうかを、React のコンポーネントで true/false として受け取るカスタムフックの作り方です。matchMedia と useSyncExternalStore を使い、設定の切り替えへの追従、use ...

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

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