title: UseState not re-rendering when updating nested object
body: <p>I'm updating in useEffect by pushing data to the old state object and return it as a value.</p>
  
  <p>This code is actually changing the _series variable from useState(), yet no re-rendering takes place, why?</p>
  
  <pre><code>import { TimeSeries, Pipeline, Stream, EventOut, TimeEvent, TimeRange  } from "pondjs";
  
  export default () =&gt; {
  
    const [_series, $series] = useState(()=&gt;{
      let state = { data : { "name": "x", "columns": ["time", "value"], "points": [], "i" : 0}}
      for(let i=10; i &gt;= 0; i--){state.data.points.push( [new Date(i)-(i*100), Math.round(Math.random()*100)])}
      return state;
    })
  
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        $series(s =&gt; {
          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(
      &lt;p&gt;{
  
            JSON.stringify((new TimeSeries(_series.data)).collection())
  
      }&lt;/p&gt;
      )
  
  }
  
  
  </code></pre>
  
  <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?</p>