Reactの公式ドキュメントの最初の原則 : 「Declarative（宣言的）」

• 要素を後から操作するのではなく、計算された結果の要素がセットされる感じ

immutability:不変性の重要性

State(Reactive)の変更は、ミューテート（mutate; 書き換え）ではなく置き換える

mutate

var player = {score: 1, name: 'Jeff'};
player.score = 2;

immutate

var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2});

なぜ？

• Reactによる変更の検出がしやすい
  • ミュータブル (mutable) なオブジェクトは中身が直接書き換えられるため、変更があったかどうかの検出が困難
    • 以前のコピーと比較してオブジェクトツリーの全体の走査が必要
  • イミュータブルなオブジェクトでの変更の検出は参照先が別の物になるので簡単
• React の再レンダータイミングの決定
  • 変更があったかどうか簡単に分かるため、コンポーネントをいつ再レンダーすべきなのか決定しやすい

レンダリングの注意

• コンポーネント内で宣言した変数は再レンダリングで毎回初期化される（当たり前）
  • 関数コンポーネントなら普通に気づくけどクラスの場合、ちょっと気づきにくいので注意
• レンダリングのたびに異なるコールバック関数が作成される
  • このコールバック関数がpropsとして下位コンポーネントに渡される場合、毎回再レンダリングされる

その他

• Reactのprops/contextの使い分け
• 本当はRecoil, Jotaiも使わずにLifting state upだけでいけるのが理想ではある
  • Jotai / Recoil は従来のReduxのようなトップダウンな状態管理ライブラリではなくボトムアップ型。
• Reactで再レンダリングを抑えるシンプルな方法
  • コンポーネントを分離してより関連性のある場所だけにstateを配置する
  • コンテナとchildrenを分離して、コンテナ、childrenそれぞれにstate必要なstateを配置する
    • コンテナが再レンダリングされても必ずしもchildrenも一緒に再レンダリングされるわけではない(propsが変わらなければ)
    • props drillingも防げる
• 【React】Context を使う前に #1 無駄なコンポーネントの層を削れ
  • Articleにまとめるんじゃなくて、ArticleContainer、ArticleSummary、ArticleContentを組み合わせる