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

メニューやドロップダウンを、外側をクリックしたら閉じるカスタムフックを TypeScript で作りました。開くボタンを内側に入れる理由、click ではなく pointerdown を待つ理由、ポータルの中の扱い、タッチ操作での動き ...

ReactでServer-Sent Eventsの通知を受け取る方法です。名前付きイベントの受け取り方、つなぎ直しとLast-Event-IDでの取りこぼし防止、同じオリジンへの接続が6本で止まる制限を検証環境で確かめました。 ...

同じサイトを複数のタブで開いているとき、片方のタブで変えた状態を、BroadcastChannelでほかのタブにも反映する方法です。チャンネルを閉じ忘れたときの動きや、あとから開いたタブに値を渡す方法を、検証環境で確かめました。

入力しながら結果が出る検索欄に、デバウンスを入れるカスタムフックを TypeScript で作りました。サーバーへのリクエストが1件にまとまること、古い結果の取り消し、空欄や検索中の表示、日本語の変換中の扱いを、Chrome for ...

WebSocketの接続、受信、送信、切れたときのつなぎ直しを、Reactのカスタムフック1つにまとめる方法です。つなぎ直しが止まらなくなる書き方や、外したあとに接続が残る書き方との違いを、検証環境で接続の数を数えて確かめました。

「/」で検索欄へ移る、Ctrl+Kでコマンドパレットを開くといったショートカットを、Reactのカスタムフック1つにまとめる方法です。入力欄の中では反応させない、押しっぱなしや日本語の変換中は無視する、といった点を検証環境で確かめまし ...

useEffectEventを使うと、エフェクトの中で最新のpropsやstateを読みながら、その値が変わってもエフェクトをやり直さずに済みます。依存配列に入れる、lintを黙らせる、useEffectEventを使う、の3通りで、 ...