親が描き直されるたびに一緒に描き直される子は、memoで包むと、propsが前と同じあいだは描き直されなくなります。その場で書いたオブジェクトや関数を渡すと効かなくなる理由とその直し方、JSXのchildrenでも効かなくなることを、 ...

Reactのボタンの状態ごとの見た目を、Storybookのストーリーとして書いて一覧にしました。Controlsでのpropsの切り替え、自動で作られるドキュメントのページ、play関数とVitestでのテストを、TypeScrip ...

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

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

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

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

dialog要素をshowModal()で開くと、Escキーで閉じる、後ろを操作できなくする、フォーカスを戻すといった処理をブラウザが受け持ちます。Reactのstateとずれないようにつなぐ書き方を、検証環境で確かめて紹介します。

入力のたびに約200ミリ秒かかる計算を描画の中で呼ぶと、入力欄が止まります。計算を Web Worker に移すと入力欄は止まりません。Worker を1つ使い回すと結果が遅れることも確かめ、入力のたびに作り直して古い計算を止める書き ...

一覧の最後に目印の要素を置き、IntersectionObserver で見張ると、目印が見えたときに次のページを読み込めます。React の useEffect での書き方を確かめ、見張りを1回だけ作る書き方で起きる2つの失敗も調べ ...

1万件の一覧を map でそのまま描くと、DOM に1万行ができます。react-window の List を使うと、見えている行とその前後だけを描きます。2.5.0 で書き方を確かめ、DOM の行の数と描画の時間を比べ、うまく動か ...