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

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

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

Reactでファイルを送る画面に、プログレスバーで進み具合を表示する方法です。XMLHttpRequest の upload に届く progress イベントで送った量を受け取ります。中止と後片付け、送信後の処理待ちの表示も扱います ...

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

自作のモーダルを閉じると、フォーカスはページの先頭に飛びます。開く前の要素を覚えて、閉じたときに戻すフックの書き方と、autoFocus で覚える要素がずれる落とし穴、元のボタンが消えたときの戻し先を、検証環境で確かめて紹介します。

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

Reactで、canvasの中のボールをrequestAnimationFrameで動かす方法です。canvasの要素とボールの位置をuseRefに持ち、useEffectで始めたループをcancelAnimationFrameで止め ...

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

useEffectの依存配列を書き忘れたり、描画のたびに作るオブジェクトを入れたりすると、エフェクトが止まらなくなります。逆に値を入れ忘れると、古い値のまま動きます。4つの間違いをChromiumで動かし、直し方とESLintの警告を ...