react stateやredux store入れてはいけない値

Question

知り合いの方からreact stateやredux storeにstring,number,boolean以外(objectなど)は入れないほうが良いと言われましたが、
なにか理由がありますでしょうか。ネットで調べてもよくわからなかったため、こちらに質問いたします。

例えば、以下のようなfileやyoutubeを再生するobject(player)などはreact stateやredux store
に入れないほうが良いと言われました。

 <input type="file" ref={upload => (this.upload = upload)} />
const file = this.upload.files[0];
this.setState({ file: file});

playClipYoutube = () => {
    const { start_time, end_time, video_id } = this.props;

    YouTubeIframeLoader.load(YT => {
      const player = new YT.Player("player", {
        videoId: video_id,
        events: {
          onStateChange: e => {
            this.onPlayerStateChange(YT, e);
          },
          onReady: () => {
            //slider.innerHTML = '';
            player.loadVideoById({
              videoId: video_id,
              startSeconds: hmsToSecondsOnly(start_time),
              endSeconds: hmsToSecondsOnly(end_time)
            });
            const max = player.getDuration();
          }
        }
      });
      this.setState({ player });
    });
  };

Comments

[wwbQzhMkhhgEmhU]

reactもfluxもreduxも使ったことないので、想像で適当なこと言います。
オブジェクト自体ではなく、オブジェクトの状態管理をしたいからではないでしょうか？
オブジェクトの状態がオブジェクトを通して透過的に見えるライブラリを使うとすると、そうした方がゴテゴテしなくて良くないですか？

Answer 1

react stateやredux storeにstring,number,boolean以外(objectなど)は入れないほうが良い

特にこの制限はないと考えています。
ただ、stateやstoreにObjectを利用する際の注意点としては以下が考えられます。

・Objectにアクセスする際には型に対する注意が必要です。
例えば、eventsがundefinedの場合、events.onStateChangeとアクセスするとエラーが発生します。
FlowやTypeScript等で型をきっちり宣言してる場合は問題ないのですが。

・パフォーマンス向上のためPureComponentを利用している場合、Objectを利用する場合には、componentのre-renderがされるか否か、気をつける必要があります。

PureComponent: https://reactjs.org/docs/react-api.html#reactpurecomponent

—Documentより引用
React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences

上記の通り、PureComponent利用時にpropやstate内でのobjectはshallow comparisonとなるため、これらobjectのデータ構造が複雑な場合には、値は変わったのにcomponentのre-renderがされない等の状況に陥る可能性はあります。