Casper Babypants Casper Babypants - 3 months ago 8
React JSX Question

React component delays the page load

I have 2 child components in my parent component,

CompA
and
CompB
. The second component does a lot of data processing (calls many other components as well for that), which delays the entire page load time. This causes my
Spinner
to get stuck after a while. Is there any other way to check if
CompB
is ready to be rendered and then render it, while the page already is loaded with
CompA
?

return(
<div>
<CompA
info = {info}
/>
<CompB
data = {data}
/>
</div>


Thanks for any help

Answer

You will always experience some lack of responsiveness if you do heavy calculations on the main thread in JavaScript. This can result in the delayed rendering you are experiencing, or e.g. in less than optimal responsiveness of buttons and other user inputs.

The solution to this is to move the calculations out of your component and out of the main thread to free it up for rendering work. You can initially render CompB in a blank/pending/loading state and update it later once the data you want to display is ready.

To move the calculations out of the main threads, you have multiple options, two of which are

  • using Web Workers to perform the calculations in the background on client side, and
  • performing the calculations asynchronously in the backend and passing the input and output via web services.