title: Having trouble updating a React component using a Hook with a timer
body: <p>I have a graph which I'm trying to update every second. In the parent component I have a timer, each second I generate a random value and parse it as a prop to the child component.</p>
  <pre><code>import './main.css'
  import { Graph } from '../../components/graph_recharts'
  
  
  export const Main = () =&gt; {
      const [timer, setTimer] = useState(&quot;&quot;)
      const [data, setData] = useState(0)
      useEffect(() =&gt; {
          let value = 1000
          const create_value = () =&gt;{
              if (positive_trend() || value - generate_random_value() &lt; 0){
                  return value+= generate_random_value()
              }
              return value-=generate_random_value() 
          }
  
          const timer = (mins, secs) =&gt; {
                          \\timer code omitted to save space
                          setData(create_value())
                      }, 1000);    
  
                  setTimeout(() =&gt; { clearInterval(timerId); setTimer('stop'); }, totalTimer);
              }
              else {
                  console.log('error')
              }
          }
          timer(5, 1)
  
      }, [])
  
  
      return (
          &lt;div className='container'&gt;
              &lt;div className='header'&gt;
                  &lt;h1&gt;{timer}&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;Graph data={data} /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;footer&quot;&gt;
                  footer
              &lt;/div&gt;
          &lt;/div&gt;
  
      );
  }
  </code></pre>
  <p>In the child component I then try to set the data and I attempted to use the useEffect hook to help me. However I get an error telling me I'm trying to update an unmounted component. I'm not sure how to solve this issue. my child component is below.</p>
  <pre><code>import React, { useState,useEffect } from 'react'
  import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
  
  
  export const Graph = (props)=&gt;{
  
  
  const [data,setData] = useState([{name:'0', price: props.data}])
  
    useEffect(() =&gt; {
      setData(...data,{name:'0', price: props.data })
      console.log(props.data)
    }, [props.data,data])
      
  
  
      return (
          &lt;LineChart 
              width={window.innerWidth*0.9} 
              height={window.innerHeight*0.4} 
              data={data}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}
          &gt;
           &lt;XAxis dataKey=&quot;name&quot;/&gt;
           &lt;YAxis/&gt;
           &lt;CartesianGrid strokeDasharray=&quot;3 3&quot;/&gt;
           &lt;Tooltip/&gt;
           &lt;Legend /&gt;
           &lt;Line type=&quot;monotone&quot; dataKey=&quot;uv&quot; stroke=&quot;#8884d8&quot; activeDot={{r: 8}}/&gt;
          &lt;/LineChart&gt;
      );
  
  }
  </code></pre>