Load html section first before expensive section - reactjs

Question

I have a time consuming loop for a table that is outputting around 300 cells with some custom computation on each, it takes 4-5 seconds to load which makes sense. So I want to display a loading modal whilst its doing this. However the modal only displays after the expensive loop finishes?
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
if(loading){
console.log(loading, "Loading has started")
}
}, [loading])
return(
<>
<Modal show={loading}>Loading....</Modal>
<a onClick={() => setLoading(true)}>Load more</a>
// Expensive loop
array.map(() => {
// HMTL
<div>
----
</div>
})
</>
)
I can see from console log that state for "loading" has been updated but the modal has yet to display, so Im assuming its waiting for the loop to finish (which I dont want). Is there way to get it to output the html for the modal first or am I missing a fundamental of React?

Answer 1

If it's a slow computation you probably don't want to be doing it on each render, since components can render quite a few times.
Ideally you only want to render do those expensive calculations when the input data changes, which can be achieved by splitting the processing and rendering.
I'm not sure I completely understand how the loading part of this is working, but something like this example should help:
const [loading, setLoading] = useState<boolean>(false);
const [computedArray, setComputedArray] = useState([]);
useEffect(() => {
setComputedArray(array.map(//expensive loop here))
setLoading(false)
}, [array])
useEffect(() => {
if(loading){
console.log(loading, "Loading has started")
}
}, [loading])
return(
<>
<Modal show={loading}>Loading....</Modal>
<a onClick={() => setLoading(true)}>Load more</a>
// Cheap loop, turn data into markup
computedArray.map(() => {
// HTML
<div>
----
</div>
})
</>
)

Answer 2

I don't know what Modal is from so answering from a general perspective:
Personally, I'd keep the array in state and update it in a separate function, and use the && symbol to display the Loading element. This way you're keeping all of your logic regarding the expensive calculation and loading/unloading in one place.
export default function App() {
const [loading, setLoading] = useState(false);
const [array, setArray] = useState([]);
const getExpensiveCalculation = async () => {
setLoading(true);
const resultOfExpensiveCalculation = await ... // something here
// assuming result is a spreadable array too
setArray([...array, ...resultOfExpensiveCalculation]);
setLoading(false);
};
return (
<>
{loading && <Modal>Loading....</Modal>}
<a onClick={getExpensiveCalculation}>Load more</a>
{array.map(element => (
<div>
---
</div>
))}
</>
);
}