Reakt Hooksのstateの一部のみを更新したい

Question

前提・実現したいこと

React(TypeScript)とApexchartsを使用してボタンをクリックするとデータを1つずつ追加しチャートを更新していくアプリを開発中です。
下記のソースコードのように実装すると目標のものはできましたが、新しくnewSeries を作成してsetしている部分に引っ掛かりを感じています。

実現したいこと
seriesのdataの配列だけを更新することはできないでしょうか？

該当のソースコード

import Chart from 'react-apexcharts';
import { useState } from 'react';

export default function MyChart() {
    const [options, setOptions] = useState({});
    const [series, setSeries] = useState([
        {
            name: 'hogehoge',
            data: [14.4, 3.5, 15.0, 4.2, 16.8, 18.1, 8.3], // ★直接ここだけを変更したい
        },
    ]);

    const add = () => {
        var arr = series[0].data.slice();
        arr.push(Math.floor(Math.random() * 10) + 3);

        // 現在は新しくstateを作成しなおしてsetしています
        var newSeries = [{
            name: 'hogehoge',
            data: arr,
        }];

        setSeries(newSeries);
    }

    return (
        <>
            <Chart options={options} series={series} type='line' />
            <style>{`
            .chart {
              width: 500px;
              margin: auto;
            }`}
            </style>
            <button onClick={add}>ランダム追加</button>
        </>
    );
}

試したこと

下記のようにコードを書き換えました。
seriesのdataは更新されますが、チャートは更新されませんでした。

export default function MyChart() {
    const [seriesData, setSeriesData] = useState([14.4, 3.5, 15.0, 4.2, 16.8, 18.1, 8.3]);
    const [series, setSeries] = useState([
        {
            name: 'hogehoge',
            data: seriesData,
        },
    ]);

    const add = () => {
        var arr = seriesData.slice();
        arr.push(Math.floor(Math.random() * 10) + 3);

        setSeriesData(arr);
    }
}

補足情報（FW/ツールのバージョンなど）

React: v.17.0.1
Typescript: v.4.0.3
apexcharts: v.3.23.1

Comments

[hoshi-takanori]

name と data を別々に更新したいなら、別々に useState すれば良いのでは。または useReducer を使うか。

[kawauso]

Reactを勉強し始めて間もないためuseReducerは知りませんでした。また調べてみたいと思います。ありがとうございました。

Answer 1

新しくnewSeries を作成してsetしている部分に引っ掛かりを感じています。

むしろ、そうしなければなりません。

Reactは基本的に、オブジェクトの変更をインスタンスの違いとして認識することで効率化する戦略を取っていますので、たとえオブジェクトの一部しか変更しない場合でも、オブジェクト全体を再作成して入れ替えるのが適切です。

Comments

[maisumakun]

> seriesのdataの配列だけを更新することはできないでしょうか？

そうしたいことに、どのような理由がありますか？

[kawauso]

ご回答ありがとうございます。
React初学者のため違和感がありましたが、いただいた回答で納得できました。
ありがとうございました。

[kawauso]

今回のコードでは省略していますが、optionsの方に複数オブジェクトが存在します。(chart,xaxis, title, など)
たとえばseriesが増えるにつれてxaxisなども増やしていきたいのですが、その場合はxaxisだけを新たに作成して更新すればよいのでしょうか？それともchart,xaxis, title,などすべてを新たに作成しなければならないのでしょうか？
後者の場合、開発途中に元のoptionsにオブジェクトが追加・変更があったさいに面倒だと感じたのがこの質問を行った理由です。

[maisumakun]

> たとえばseriesが増えるにつれてxaxisなども増やしていきたいのですが、その場合はxaxisだけを新たに作成して更新すればよいのでしょうか？

はい、変更のあったオブジェクトと、その親（さらに親なども含む）だけで大丈夫です。変更のないオブジェクトはそのまま引き回して問題ありません。

[kawauso]

ありがとうございました。開発を進めていきたいと思います。