UseState not re-rendering when updating nested object

Question

I'm updating in useEffect by pushing data to the old state object and return it as a value.

This code is actually changing the _series variable from useState(), yet no re-rendering takes place, why?

import { TimeSeries, Pipeline, Stream, EventOut, TimeEvent, TimeRange  } from "pondjs";

export default () => {

  const [_series, $series] = useState(()=>{
    let state = { data : { "name": "x", "columns": ["time", "value"], "points": [], "i" : 0}}
    for(let i=10; i >= 0; i--){state.data.points.push( [new Date(i)-(i*100), Math.round(Math.random()*100)])}
    return state;
  })

  useEffect(() => {
    const interval = setInterval(() => {
      $series(s => {
        s.data.points.push( [new Date(s.data.i*1000), Math.round(Math.sin(s.data.i/10)*50+50)] )
        s.data.points.shift();
        s.data.i++;
        return s;
      });
    }, 500);
  }, []);


    return(
    <p>{

          JSON.stringify((new TimeSeries(_series.data)).collection())

    }</p>
    )

}

I might also have done a mistake by updating the key "i" inside the state, so I try to update multiple parts of the object at once. Is this bad practice?

`return {...s}` would create a new object to make sure React knows it's a new state — Aprillion, May 08 '19 at 08:09

score 3 · Accepted Answer · answered May 08 '19 at 06:17

The problem is that when you change the state by modifying original state its value is updated at the original reference and hence react thinks that nothing has changed and hence it doesn't re-render, that is why it is expected that treat state as if it is immutable when you try to update state

 const { useState, useEffect } = React;
 const App = () => {
    
      const [_series, $series] = useState(()=>{
        let state = { data : { "name": "x", "columns": ["time", "value"], "points": [], "i" : 0}}
        for(let i=10; i >= 0; i--){state.data.points.push( [new Date(i)-(i*100), Math.round(Math.random()*100)])}
        return state;
      })
    
      useEffect(() => {
        const interval = setInterval(() => {
          $series(s => {
            return {
                ...s,
                data: {
                  ...s.data,
                  i: s.data.i + 1,
                  points: [...s.data.points.slice(1), [new Date(s.data.i*1000), Math.round(Math.sin(s.data.i/10)*50+50)]]
                }
            }
          });
        }, 500);
      }, []);
    
    
        return(
        <p>{
    
              JSON.stringify(_series.data)
    
        }</p>
        )
    
    }
    
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app" />

UseState not re-rendering when updating nested object

1 Answers1

Linked