How to properly avoid error "Too many re-renders in reactjs" - reactjs

Question

I used the code below to display records from two table successfully and its working fine
Here is my issue:
Now I need to display and hide a loading image or text as records is being loaded. I have added
const [loading, setLoading] = useState(true);
setLoading(false);
let image_loading;
if (loading) {
image_loading = 'Data is being loaded'
}
in the return I have added the code below
<span>{image_loading}</span>
When I now run the script, it displays error:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
The line of code that seems to cause this error is setLoading(false);. I have a reference solution but it has to do with click event.
Here is the code:
import {initializeBlock, useBase, base, useRecords} from '#airtable/blocks/ui';
import React, { Component } from "react";
import ReactDOM from 'react-dom';
function Rec() {
const [loading, setLoading] = useState(true);
const currentDate = new Date();
const base = useBase();
// get content of first table
const tab1 = base.getTableByNameIfExists('myfirst_table');
// grab all the records from that table
const records = useRecords(tab1);
// get content of second table
const tab2 = base.getTableByNameIfExists('mysecond_table');
// grab all the records from that table
const records2 = useRecords(tab2);
if(records2){
setLoading(false);
}
let image_loading;
if (loading) {
image_loading = 'Data is being loaded'
}
return (
<div>
<span>{image_loading}</span>
<div>
<h1> First Records</h1>
{records.map(record => {
return <li key={record.id}>{record.id} </li>
})}
</div>
<div>
<h1> First Records</h1>
{records2.map(record2 => {
return <li key={record2.id}>{record2.id} </li>
})}
</div>
</div>
);
}
export default Rec;

Answer 1

Typically you want to call setState or useState functions inside of a useEffect, with a condition. The issue is here:
if (records2) {
setLoading(false);
}
By the time the code reaches here, records2 does exist, and so it sets the state. Once the state changes, the component re-renders, and this function is run again, and it goes on in an infinite loop.
You can use useEffect to make the running of setLoading conditional on some other variable. Like this:
useEffect(() => {
if (records2){
setLoading(false)
}
}, [records2])
So now setLoading will only run when records2 changes and if it exists.