はじめに
ドキュメントを読んでいたら、純粋性と副作用について出てきたので詳しく調べてみました。
純粋とは
純関数（pure function)は以下の特徴を持つものだとReact公式ドキュメントに記載してあります。
・同じ入力には常に同じ結果を返す。
・呼び出される前に存在していたオブジェクトや変数を変更しない。（副作用を起こさないということだと思います。）
文字ではピンとこないので数式を用いて具体的に説明をします。
この数式を考えてみてください：y = 2x。
もし x = 2 ならば y = 4。常にです。
もし x = 3 ならば y = 6。常にです。
もし x = 3 ならば、y が現在時刻や株式市況に影響されてたまに 9 や –1 や 2.5 になったりはしません。
もし y = 2x かつ x = 3 なら、y はどんな場合でも常に 6 になるのです。React公式ドキュメントより引用
typescriptで表してみるとこんな感じです。
const double = (number: number) => {
return 2 * number;
};
引数に同じ数字を返せば同じ結果が返ってくるのでこのdouble関数は純粋であると言えます。
これが純関数です。
純粋性のまとめ
純粋とは以下の条件を満たすものをいいます。
・同じ入力に対して同じ出力を返す
・副作用を持たない
基本的にはコンポーネントは純粋であるほうがいいと思われます。
副作用とは？
純粋性の話でも出てきた副作用(side effect)とは、
簡単に言うと、関数やコンポーネントがその外部に影響を与えてしまうものだと思われます。
では具体例としてどのようなものが副作用に当たるのか調べてみると、
- DOMの操作
- APIからのデータの取得
- ブラウザのローカルストレージへのアクセス
- 外部ファイルの読み書き
などらしいです。
コンポーネントのレンダリングのロジックと副作用のロジックを明確に分離するためにも、副作用の処理をuseEffectを使用して行います。
useEffectとは
useEffectというのはReactHooksの中の一つです。副作用の処理を関数コンポーネント内で扱えるようにし、関数の実行タイミングをレンダリング後まで遅延できます。
useEffectは以下のように書きます。
useEffect(() => {
//実行させたい処理を記述
return () => {
// クリーンアップの処理
}
}, [])//依存配列
第一引数のコールバック関数には実行したい処理を記述します。
useEffectの内部から関数を返すことで、副作用のクリーンアップを行うことができます。
第二引数の依存配列には、値を指定する場合、空の場合、省略する場合の3パターンあります。
useEffectのデフォルトの挙動はレンダーのたびに実行です。
この記事にあるように依存配列は「変更された場合に実行」というより「変更されなければスキップ」と捉えたほうがわかりやすいのかも知れないですね。
副作用まとめ
副作用に対してネガティブな印象がありますが、絶対に悪影響を及ぼすものではないと思うので適切な制御を行うようにすればいいと思います。
この話においてReactのライフサイクルの話が重要になると思うので参考のところからライフサイクルの記事を読んでみると良いと思います！
参考
Discussion