Chart not updating in nextjs

[rayanfer32]

https://codesandbox.io/s/muddy-sun-bjlx5?file=/pages/Charts2.js

[ccssmnn]

Try changing your updateChart like so:

const updateChart = () => {
    const newSeries = [1, 2, 3, 4, 5];
    // update a nested property of state (method 2)
    setChartState((prev) => {
      // prev.series[0].data = newSeries;
      // prev.series[0] = { ...prev.series[0], data: newSeries };
      // console.log(chartState);
      return {
        ...prev,
        series: [
          {
            ...prev.series[0],
            data: newSeries
          }
        ]
      };
    });
  };

Your previous approach didn't work because you changed a value inside an existing object instead of creating a new one. Within React this leads to unexpected behaviour. You only re-render, when you get new values. But is far too expensive, to "deep-check" objects. That's why JavaScript only checks for reference, when evaluating a === b with Objects or Arrays. When creating a new object, this will evaluate to false and cause an update.