Loading React Components in parallel?

Question

Is there a way to structure your code such that components will load in parallel or asynchronously?

Currently my structure is:

<Stream> 
 {listOfArticles }
</Stream>

The {listOfArticles} creates an array of articles, and each article is set to load from the Embedly Card API, so the network tab shows a staggered, linear loading that takes up to 10seconds for 25 items.

thanks!

Answer 1

Generally, it is not ideal to keep data in React's state (you generally only want React states to track UI states, not data models). You should keep your data isolated in models or store, and use actions or events to load data via api (see Flux)

But to answer your question, you can use something like react-async to create async components