useRefとuseStateを描画回数の違いで使い分ける方法
useStateの値を変えるとコンポーネントは描画し直されますが、useRefの値を変えても描画は起きません。クリックの回数とタイマーのIDを例に、描画の回数を数えて違いを確かめ、画面に出す値はuseState、出さない値はuseRe ...
useReducerで、関係するstateの更新をまとめる方法
送信中・エラー・送信済みのように、いっしょに変わるstateをuseStateで別々に持つと、1つ更新し忘れて、ありえない表示が出ることがあります。useReducerで更新を1つの関数にまとめる書き方と、型やテストでの確かめ方、つま ...
keyを変えて、Reactコンポーネントの状態をリセットする方法
Reactは、同じ場所に描画されたコンポーネントのstateを引き継ぎます。keyに相手のIDなどを渡すと、値が変わったときにコンポーネントを作り直し、子のstateまで初めに戻せます。エフェクトで空にする書き方との違いや、keyに使 ...
