React : Stateに連想配列を入れた場合の更新は差分でしょうか？

Question

掲題の通りです。
以下のように、componentのstateに、buttonsというstateに連想配列形式のデータを入れることを想定します。
この時、例えばthis.state.buttons["現在地"]のcan_clickを、あるアクションを受けた場合falseに変えるなどのfunctionを入れた場合、それが起きたら<RadioCircleButtons buttons={buttons} />の更新は

1. 差分（this.state.buttons["現在地"].can_clickのみの更新）
2. すべて（'this.state.buttons'を全て更新）

のどちらでしょうか？

import React from 'react';
import RadioCircleButtons from '../utils/RadioCircleButtons';

class DrillButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      is_shown: '',
      buttons: { "現在地": { name: "現在地", can_click: true, is_selected: false }, "駅名": { name: "駅名", can_click: true, is_selected: false } },
    };
  }

  render() {
    const buttons = this.state.buttons
    return (
      <div>
        <RadioCircleButtons buttons={buttons} />
      </div>
    );
  }
}

export default DrillButtons;

よろしくお願いします。

==== 追記 ====
本質問と少し話がズレますが、
ネストしたcomponentを書き換えるには、全てを複製する必要がある？？

this.setState({
      buttons: { "現在地": { name: "現在地", can_click: false, is_selected: false }, "駅名": { name: "駅名", can_click: true, is_selected: false } },
    };
});

https://teratail.com/questions/116344

=== さらに追記 ===
https://stackoverflow.com/questions/43040721/how-to-update-a-nested-state-in-react
ネストしたstateの書き換えについては理解しました。

依然として、ネストしたstateの更新が差分なのかはわかっていないので、ご教授いただきたいです。
追記が多くわかりづらくなってしまいましたが、よろしくお願いします。

Answer 1

setState() より更新された state は、過去の state となんら関係ありません。
当然差分も存在しませんし、そんなことは書き手が考えることではありません。
setState() により state が更新されたらそのコンポーネントの render() が走るだけです。

Answer 2

「更新」が、何に対するものかが、掴みきれなかったのですが、
Stateに対するもの、と仮定すると。

setStateに渡すオブジェクトは、現在のStateを利用して、毎回フルスクラッチから全オブジェクトを作成する。

というイメージが近い気がします。

ということで、回答としては、2番なのですが、
実際にやることは、現在のStateに、変更した分を反映して、新しいStateオブジェクトを作る。
なので、1番と言えなくもありません。

Reactの内部実装を確認したわけではありませんが、
内部で管理しているStateと、setStateで渡されたオブジェクトを比較して、
変化があった部分に関連するDOMを更新する。というイメージだと理解しています。

このイメージで考えれば、setStateに渡すオブジェクトは、どうなっていなければならないか、
認識しやすくなるように思います。

Comments

[Meganezaru]

og24715 さんの回答をみて、気になり、ソースをのぞいてみましたが、
私の回答は、誤りのようなので、後ほど訂正します。

まだ、冒頭部分を読み始めただけですので、詳細は把握していませんが、
説明コメントには、setStateに渡すのは、partialStateとありますので、
変更したいものだけでも良さそうです。
以下、一部抜粋です。

* Sets a subset of the state. Always use this to mutate
* state. You should treat `this.state` as immutable.

Component.prototype.setState = function(partialState, callback) {

いい加減な回答で、大変失礼しました。
まずは、誤った回答だったという報告だけ。