As I understand, in the IO demo "this.deferSetState" is needed to prevent committing the update of the "MoviePage" component until the data is ready. Basically, this way React will wait until the thrown promise is resolved and then it will apply the update after rerendering "MoviePage" with the downloaded async data. Then, how does "this.deferSetState" play together with the "Placeholder" component added after? Can we say that without using any "Placeholder" at all, the root component of the React tree (e.g. "App") acts as an implicit "Placeholder" and waits for the async data before applying the update as the state was set through "this.deferSetState"?
Now that React 16 has been released, how does Time Slicing work in the official React 16 release? Dan mentions that while React is rendering something asynchronously, it will not block the main JS thread allowing it to register events like scroll events without hanging. I have tried to implement the rendering of new items of a list while scrolling and there is still a slight moment where the scroll blocks because of the CPU bound work. Is that normal?
There has already been some changes from the talk, and the api is still unstable, but you can now try a similar demo in the React repo. twitter.com/dan_abramov/status/1025185531515351040
That fetcher/placeholder thing seems like a lot of internal magic. For me the coolest thing about react is that it is dead simple. I don't like where it's going.
Hi Top, I pretty agree with you, that React has a simple and good learning curve. Since I see this Talf the second time, I found that the real topic in this talk is really about something like "How powerful React can be to adapt to wide use cases." (As they said at the very beginning: different computer power and network level)
@@ashwinbaskaran703 I think React Fiber (some of it still in development) is the Time Slicing and Suspense is already released, but there is still some outstanding work
Stunning idea & implementations in this demo. This is the second time I checkout this Talk.
"jsconf iceland hello wow" xD Asking for some applause here... audience didn't seem to understand how epic this demo was :P
Ice-cold audience. haha
As I understand, in the IO demo "this.deferSetState" is needed to prevent committing the update of the "MoviePage" component until the data is ready. Basically, this way React will wait until the thrown promise is resolved and then it will apply the update after rerendering "MoviePage" with the downloaded async data.
Then, how does "this.deferSetState" play together with the "Placeholder" component added after? Can we say that without using any "Placeholder" at all, the root component of the React tree (e.g. "App") acts as an implicit "Placeholder" and waits for the async data before applying the update as the state was set through "this.deferSetState"?
Amazing, even 2 years after
Even 6
The demo was so special. Thank You.
Now that React 16 has been released, how does Time Slicing work in the official React 16 release? Dan mentions that while React is rendering something asynchronously, it will not block the main JS thread allowing it to register events like scroll events without hanging. I have tried to implement the rendering of new items of a list while scrolling and there is still a slight moment where the scroll blocks because of the CPU bound work. Is that normal?
Is it because the slight moment where the scroll blocks is happening in the React 16's Fiber commit phase?
As I understood later on, React 16 does not implement Time Slicing yet, as well as the Suspense features mentioned in this talk...
Great presentation with very good examples.
OMG!!! Cant wait! How many lines I'll remove by using this?! Oh man
Love the asynchronous part. Thanks Dan
Is it possible to get the source code of this demo?
There has already been some changes from the talk, and the api is still unstable, but you can now try a similar demo in the React repo. twitter.com/dan_abramov/status/1025185531515351040
Dan's talk is never boring.
Very nice talk Dan
I wanna know how to impliment the clock viz.
Dan is the coolest lmao
Brilliant! Demo is so cool
Fantastic talk!
All we need is access to that future folder 🔮
now you do.
What is the vscode theme used here
this demo is amazing. its can be shared
where to get those demo?
I couldn't find this createFetcher API in react doc. It's been two years since this conference. Am I missing sommething?
The "hope" in "We hope to deliver it this year". It's not out yet afaik.
React cache (www.npmjs.com/package/react-cache) will have 'createFetch' but potentially not the same name.
what is that syntax theme?
Nice talk!
Looking forward to play with it! :D
Btw, what color syntax is this? looks very good.
I also want to know what syntax color this is uahuhau. Looks great!
looks like Night Owl
He looks like Norman Osborn from Spiderman in the thumbnail 😅
This is amazing!!
This is so awesome
That fetcher/placeholder thing seems like a lot of internal magic. For me the coolest thing about react is that it is dead simple. I don't like where it's going.
Hi Top,
I pretty agree with you, that React has a simple and good learning curve. Since I see this Talf the second time, I found that the real topic in this talk is really about something like "How powerful React can be to adapt to wide use cases." (As they said at the very beginning: different computer power and network level)
So now 2021, where do I find time slicing? Suspense yes. But time slicing looks cool.
are those features released?
@@ashwinbaskaran703 I think React Fiber (some of it still in development) is the Time Slicing and Suspense is already released, but there is still some outstanding work
so, we're throwing away relay and other graphql libs?
wat о_О
Dan looks like Norman Osborn from Spiderman
ahahah
Really? No ones going to comment about that dope ass turtle neck????
Nodejs for UI
AI will replace us all :)