title: Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
body: <p>After navigation from one page to another page, I am trying to add a new row to the table of the page. The below code results in an infinite loop. How can I avoid it?</p>
  <pre><code>function createData(videos, status, model, manage, device, favourite) {
    return { videos, status, model, manage, device, favourite };
  }
  const rows = [
    createData(&quot;https://www.youtube.com/watch?v=ug50zmP9I7s&quot;, 'Online', 2, 24, 'Cam1', true),
    createData(&quot;https://www.youtube.com/watch?v=Bey4XXJAqS8&quot;, 'Offline', 2, 37, 'Am2', true),
    createData(&quot;https://www.youtube.com/watch?v=Bey4XXJAqS8&quot;, 'Online', 2, 24, 'Zam3', false),
    createData(&quot;https://www.youtube.com/watch?v=ug50zmP9I7s&quot;, 'Offline', 2, 67, 'Dam4', false),
    createData(&quot;https://www.youtube.com/watch?v=Bey4XXJAqS8&quot;, 'Online', 2, 49, 'Lam5', false),
  ];
  export default function StreamPage(props) {   
    const [Results, setResults] = React.useState(rows);
    let youtubeURL = props.location.deviceRow;
    if (youtubeURL != null &amp;&amp; youtubeURL != &quot;&quot;) {
      const newRows = [...rows];
      const newData = createData(youtubeURL, 'Online', 4, 49, 'Lam6', false)     
      setResults(newRows.concat(newData))  //   Here I have infinite loop and error 
    }
  
    return ()
  };
  
  </code></pre>
  <p>setResults() is called multiple times and as a result there is a loop</p>