reactjs - Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

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?

function createData(videos, status, model, manage, device, favourite) {
  return { videos, status, model, manage, device, favourite };
}
const rows = [
  createData("https://www.youtube.com/watch?v=ug50zmP9I7s", 'Online', 2, 24, 'Cam1', true),
  createData("https://www.youtube.com/watch?v=Bey4XXJAqS8", 'Offline', 2, 37, 'Am2', true),
  createData("https://www.youtube.com/watch?v=Bey4XXJAqS8", 'Online', 2, 24, 'Zam3', false),
  createData("https://www.youtube.com/watch?v=ug50zmP9I7s", 'Offline', 2, 67, 'Dam4', false),
  createData("https://www.youtube.com/watch?v=Bey4XXJAqS8", 'Online', 2, 49, 'Lam5', false),
];
export default function StreamPage(props) {   
  const [Results, setResults] = React.useState(rows);
  let youtubeURL = props.location.deviceRow;
  if (youtubeURL != null && youtubeURL != "") {
    const newRows = [...rows];
    const newData = createData(youtubeURL, 'Online', 4, 49, 'Lam6', false)     
    setResults(newRows.concat(newData))  //   Here I have infinite loop and error 
  }

  return ()
};

setResults() is called multiple times and as a result there is a loop

Answer 1

You've to use useEffect to avoid infinite loop:

// ...

React.useEffect(() => {
  if (youtubeURL != null && youtubeURL != "") {
    const newData = createData(youtubeURL, 'Online', 4, 49, 'Lam6', false)     
    setResults(prevRows => [...prevRows, newData])
  }
},[youtubeURL])

// ...