React Conf 2019 happened last week and we got some great content from all the speakers. However, I can't shake the feeling of walking away with last's years promise.
I'm not implying that the React team has been slacking or something, there was a lot of work done to prove the concept for concurrent mode and I'm glad they're taking their time to deliver something stable and proven on the real world. I had the chance to be at this (and last year's) React Conf and talk with some of the people behind the React projects and these are just my thoughts from this experience.
The React That Was Promised
Last year, Dan Abramov delivered a memorable talk titled "Beyond React 16" about concurrent rendering aka "Time slicing"
Later that same year Jared Palmer introduced us to the benefits of concurrent rendering on his talk "Moving to React Suspense"
Fast Forward a full year later and this year's React Conf gives us a deep dive into Concurrent mode and how the teams at Facebook are taking advantage of it to improve initial load times and time to interactive in lower end devices through techniques like selective hydration, server-side rendering and html streaming.
But what exactly is Concurrent Mode?
quoting the Official React Docs:
Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.
In simple terms, this will allow React to manage time more efficiently by performing several tasks at the same time in a non-blocking way. So when a component isn't ready to display yet, React will do something else instead. This will enable an array of user interactions where before we would only had a frozen loading state.
With concurrent mode fast devices increase in responsiveness giving a synchronous accessed data kind of feeling. In slow devices, the non-blocking nature of concurrent mode would provide responsiveness even with few resources, server-side rendering should take some of the load for slow devices to render the initial view, and selective hydration would increase perceived performance by prioritizing work based on user interaction heuristics.
For developers coordinating resources, data, and side-effects would become simpler, making a fluid and responsive app that scales is now easier.
How is this related to hooks?
Last year at React Conf the Hooks API was announced, and it got a lot of hype and well deserved attention, it basically out-shined the more "experimental" Suspense presentations.
Hooks made it easier for developers to take advantage of the functional components as more than just presentational and encouraging the transition from class-based components to functional components.
Functional components enable better tree-shaking and more predictable change tracking which helped a lot with the developer tooling and fast refresh, also announced in this year's conference, it enables the people working on React to take advantage of functional programming concepts that create a better developer experience and increase your application's performance.
A year later hooks has taken by storm the repositories both the general public and major OSS libraries, and now that hooks has pushed functional style into the spotlight, the community is ready for the next step: Parallelism
It's important we think about Parallelism
We're reaching the physical limits to which we can optimize chip design.
year after year Intel (as market leader) has struggled to scale down their transistors, forcing them to present new products with more cores instead. These are things that the web can take advantage of, and the React team has presented the right patterns for us developers to also benefit from that without getting into all the pitfalls of traditional "multi-threading".
The concepts that React has pushed have historically changed with the real world, and I think it is part of React's success.
Conclusion
Now that the landscape has changed, React is ready to give us more tools from the functional shed, with parallelism being the focus of this year we have to consider, why is this still on the experimental channel? will the third time be the charm for Concurrent mode? I'm excited to see what comes next.
Top comments (3)
Hi Jose,
Can you please elaborate more about this part?
"Functional components enable better tree-shaking and more predictable change tracking which helped a lot with the developer tooling"
How does exactly functional component with Hooks enable better tree shaking and more predictable change tracking?
Do you have any source for this information?
Hi Oskar,
I don't have anything written to back it up, however a video version should be just as good :)
*the liquid tags for videos on the comments don't support time codes yet so I'll have to paste a link: youtu.be/V-QO-KO90iQ?t=490
I would love to dive deeper into real example showing, that class method isn't shaken, whereas hook function is.
Maybe I will have to create one this weekend... :)
Thanks for pointing this out!