3 ms·

"For IO-bound updates (such as fetching code or data from the network), concurrency means that React can start rendering in memory even before all the data arri

by zyang 7y ago

"For IO-bound updates (such as fetching code or data from the network), concurrency means that React can start rendering in memory even before all the data arrives, and skip showing jarring empty loading states." What is there to render but loading states when there's no data?

jacobr 7y ago
Buttons, headings, labels... Will all be ready when your data arrives.
- JMTQp8lwXL 7y ago
  You can already do that without concurrent mode, though. Let's say you have a navbar (your website's header), a list of things asynchronously retrieved from an API, and a footer. const myApp = () => ( <Header /> <Body /> <Footer /> ); Body can make the network request, and store the result in state. Since the network request took 200ms, Header and Footer have already rendered.
xtagon 7y ago
Stale cached data.
PKop 7y ago
>when there's no data Everything else, or nothing prior to some threshold, or what you specify and where within the Suspense abstractions. Since you don't know exactly when all of the data is ready in different parts across time, manually coordinating all of it without a cohesive declarative paradigm results in more code and more errors, and more bad UX of flashing spinners and flickering loading states. The point of concurrent rendering and Suspense are to abstract at a higher lever, or more general terms what to do and what to render when there's no data.
the8472 7y ago
Perhaps he meant "before all of the data has arrived", i.e. some of it is already available.
danabramov 7y ago
Initially, maybe not much. Maybe some chrome of the page with navigation or buttons. Then as the data streams in, we can progressively render more of it until we’re ready to show something. I know I sound like a broken record, but these two deep dives answer all these questions: 1. https://reactjs.org/docs/concurrent-mode-suspense.html https://reactjs.org/docs/concurrent-mode-suspense.html 2. https://reactjs.org/docs/concurrent-mode-patterns.html https://reactjs.org/docs/concurrent-mode-patterns.html I hope they’re helpful.

by zyang 7y ago

jacobr 7y ago

Buttons, headings, labels... Will all be ready when your data arrives.

JMTQp8lwXL 7y ago
You can already do that without concurrent mode, though. Let's say you have a navbar (your website's header), a list of things asynchronously retrieved from an API, and a footer. const myApp = () => ( <Header /> <Body /> <Footer /> ); Body can make the network request, and store the result in state. Since the network request took 200ms, Header and Footer have already rendered.

xtagon 7y ago

Stale cached data.

PKop 7y ago

>when there's no data Everything else, or nothing prior to some threshold, or what you specify and where within the Suspense abstractions. Since you don't know exactly when all of the data is ready in different parts across time, manually coordinating all of it without a cohesive declarative paradigm results in more code and more errors, and more bad UX of flashing spinners and flickering loading states. The point of concurrent rendering and Suspense are to abstract at a higher lever, or more general terms what to do and what to render when there's no data.

the8472 7y ago

Perhaps he meant "before all of the data has arrived", i.e. some of it is already available.

danabramov 7y ago

Initially, maybe not much. Maybe some chrome of the page with navigation or buttons. Then as the data streams in, we can progressively render more of it until we’re ready to show something. I know I sound like a broken record, but these two deep dives answer all these questions: 1. https://reactjs.org/docs/concurrent-mode-suspense.html https://reactjs.org/docs/concurrent-mode-suspense.html 2. https://reactjs.org/docs/concurrent-mode-patterns.html https://reactjs.org/docs/concurrent-mode-patterns.html I hope they’re helpful.