Casper Babypants Casper Babypants - 2 months ago 6x
React JSX Question

React component delays the page load

I have 2 child components in my parent component,

. 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
to get stuck after a while. Is there any other way to check if
is ready to be rendered and then render it, while the page already is loaded with

info = {info}
data = {data}

Thanks for any help


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.