お手本の文を1文字ずつ打ち、まちがえた文字をピンクで示し、最後に時間と正確率を出すタイピング練習の画面を React で作りました。2文字目から進まない、Shift をミスに数える、Space でボタンが押される書き方とも比べています ...

過去・現在・未来の3つに分けて状態を持つ、useReducer を使ったフックで、元に戻す・やり直すを作りました。Ctrl+Z などのショートカット、入力欄でのブラウザの「元に戻す」との分け方、更新の書き方で履歴が壊れる例も確かめてい ...

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

送信中・エラー・送信済みのように、いっしょに変わるstateをuseStateで別々に持つと、1つ更新し忘れて、ありえない表示が出ることがあります。useReducerで更新を1つの関数にまとめる書き方と、型やテストでの確かめ方、つま ...