React課題5 調べたこと ✏️

//例えば
const [count, setCount] = useState(0);
const [message, setMessage] = useState('');

ただ、Stateを複数にして管理すると複雑になってしまった.なるべくStateの数を減らして管理した方がコードが理解しやすく、保守しやすい状態を保てるので好ましいということを知った.
Doc「エフェクトは必要ないかもしれません」を読むと、

今後もできるだけ少ないState(最小表現を見つける..!)でシンプルに管理できないか考えていこう..

const handleButtonClick = () => {
　setCount(count + 1);

　// 非同期のため、この時点では`count`はまだ更新されていません
　console.log(count); // ここでは古い値が出力される

　if ((count + 1) % 10 === 0) {
　　setMessage("10の倍数に到達しました！");
　} else {
　　setMessage("");
　}
};

上記の例だと、ボタンを押した時にsetCount( count + 1 ) が実行されることで、State変数としてcount + 1した値に変更される.

しかし、setCountした段階ではState変数 ‘count’は更新されない. よって、console.log(count)してもcount + 1 の値はまだ取得できない.

– > その後に続いているif文で’count’を使用しているけど、ここではまだ更新されていない ‘count’ が使用されている.

そのため、if文の中でも( count + 1 )として使用する必要がある.

handleButtonClick()が実行されたとき、最後にまとめてStateが更新される.

useEffect

非同期の挙動でハマった時にuseEffectの存在を知った.

今回のような関数を更新するような場合は不適格ではあったけど、どう適していないのかを色々調べたので学習ノート書いておく. まだ理解はかなりふわっと..

使うべきところが来たら深く掘っていきたい.

useEffectとは？

公式のDocでは「コンポーネントを外部システムと同期させるための React フック」と解説されている.

PropsやStateが変化したタイミングで実行する処理を設定できる.

useEffect(() => {
　// PropsやStateが変化したタイミングで実行する処理

　return () => {
　// 主にコンポーネントがアンマウントされる時に実行されるクリーンアップ関数
　};
}, [依存配列]);

使いどころ

useEffectの使い所

• イベントハンドラを登録する
  ∟Reactのデフォルトの機能では実現できない場合
• 高頻度で発生するイベントを処理する場合
  ∟Reactの仕組みで再レンダリングを行うとパフォーマンス上の問題がある場合
• データを取得するとき（許容できるケースの場合がある）

適していないケース

• 私が行ったようなuseEffectから更新系の処理をすることはすべきではない。
• クリーンアップ関数の無い時点でユースケースとして的確でない。
  ∟コンポーネントがアンマウントされた時に、コンポーネントへの影響がリセットされないため

参考にした記事は以下です.

過激派が教える！　useEffectの正しい使い方

zenn.dev