入れ子の深い JSON を、オブジェクトや配列ごとに開いたり閉じたりできる表示を、ライブラリなしの React で作りました。開いている場所をパスの Set で持つ方法、パスを「.」でつなぐと起きる取り違え、JSON.parse のエ ...

フォルダとファイルのような階層を、React でツリー表示する部品を作りました。パスの一覧から入れ子のデータを作る方法、開いているフォルダを Set で持つ理由、role=”tree” の付け方、矢印キーでの操 ...

details と summary でアコーディオンを作ると、開閉とキーボード操作はブラウザに任せられます。React の state で開閉を持つときに onToggle が要る理由、name 属性で1つだけ開く作り、三角の消し方と ...

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

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

React 18以降のcreateRootでは、setTimeoutやPromiseの中で続けて呼んだstateの更新も、1回の描画にまとめられます。React 17・18・19で描画の回数を数え、まとめられない書き方も確かめました。 ...

Reactでstateを更新した直後の行では、画面（DOM）はまだ古いままです。flushSyncで包むと、次の行に進む前に画面が更新されます。スクロールと印刷の例で確かめ、エフェクトの中で呼んだときの警告と描画の回数も調べました。

StrictModeで包むと、開発中だけ一部の関数が2回呼ばれます。コンポーネントの本体やuseStateの初期化関数、reducer、マウント時のエフェクトなどは2回で、イベントハンドラは1回でした。一部だけ包んだときや本番用のビル ...

Reactの入力欄には、valueとonChangeで値をstateに持たせる「制御する」書き方と、defaultValueで初期値だけを渡す「制御しない」書き方があります。描画の回数や初期値の変更、リセットボタンの効き方を比べ、使い ...

useStateの値を変えるとコンポーネントは描画し直されますが、useRefの値を変えても描画は起きません。クリックの回数とタイマーのIDを例に、描画の回数を数えて違いを確かめ、画面に出す値はuseState、出さない値はuseRe ...