副作用 とは？

たとえば計算するだけのはずの関数がこっそりデータベースを書き換えていたら怖いでしょ？副作用が「どこで何をしているか」不明だとバグの原因になる。だから副作用を明確に管理して、予想外の動きを防ぐのが大事。

useEffect(() => { ここに副作用 }, [依存配列]) という形で書く。コンポーネントの描画後に実行される。依存配列に指定した値が変わったときだけ再実行される。API呼び出しやイベントリスナーの登録はここに書く。

できない。ユーザーの入力を受け取ること、画面を描画すること、データを保存すること、これらはすべて副作用。目指すべきは「副作用ゼロ」ではなく「副作用の発生場所を限定して管理する」こと。

同じ入力に対して必ず同じ出力を返し、副作用がない関数のことだよ。テストが簡単（入力と出力を確認するだけ）、並列実行しても安全、結果をキャッシュできる、リファクタリングしやすい。関数型プログラミングはこの「純粋関数をできるだけ増やす」という方針で設計するんだ。

レンダリング中（returnまでの処理）で副作用を起こすと、コンポーネントが何回描画されるか予測できなくなるから危険なんだ。React 18のStrict Modeでは意図的に2回レンダリングして副作用のバグを検出する。副作用はuseEffectの中に閉じ込めるか、イベントハンドラの中で実行するのがReactのルール。これを守ることで「UIは状態の関数」という予測可能な設計が実現できるんだよ。