Last week was held the React Conf, which is always a big event for the React community. In 2018, the conference was spectacular with the hooks announcement and some short demos of Suspense and Concurrent mode.
The 2019 edition was not as astonishing as the 2018's, but it was anyway two amazing days with great talks and some interesting insights on what the core team is working on.
Concurrent mode & Suspense
Of course, we got to learn a little more about the Concurrent mode. Some people expected a presentation as spectacular as the hook introduction was, but the team decided to do differently this year.
No talks were planned on stage to dig in this particular topic in the schedule, but the team published new sections in the official documentation to introduce the concepts behind.
Yuzhi Zheng (Engineering Manager of React and Relay) still showed an example of what Suspense can do with image loading, as we will be able to control in which order images lazy-loaded will display. And it looked pretty amazing, even if Concurrent mode and Suspense will be more powerful than just this.
They finally announced that Concurrent mode is available to test behind the tag @next. Just do an npm install react@next react-dom@next to try out!
I won't in this short paper explain what Concurrent mode as the documentation does it perfectly and it seems pretty impossible to summarize it for a 5 min read post
The future
But they also announced some other features that will come in the far future. The React core team specified that some of those are still in the R&D phase and won't be public shortly. But it's still interesting to know what we can expect from them.
Accessibility
Some of the early-stage work for the core team is about improving accessibility for React interfaces. They listed two things: a better handle of the focus (especially with Concurrent mode that can block some components render), and create some input interface to manage event handler for every platform whatever it is a click input, a touch input or even VR's input.
Initial Render
One of the biggest concerns of the team in the next months/years is to minimize the CPU use and initial render time. To do so, they introduced the concept of "progressive hydration". That will consist of better control on the isomorphic rendering while we will be able to manage priority on which part of the app has priority to rehydrate after a server-side rendering.
They gave us as an example, the possibility of rehydrating a component only if the user hovers it. As only one part of the app will render on runtime at a specific moment, the "time to interact" performance will increase.
Bonus beyond React
A bit later, during the "Building The New Facebook With React and Relay" talk, Frank Yan announced that Facebook created a new solution for CSS-in-JS to build the new Facebook UI.
Of course, there is today a ton of libraries to write style in components, but Facebook's one presents some interesting features as a conversion of relative units (like rem or em) into pixels, some type checking, better handling of className order and their priorities, split of class to regroup CSS declarations in common statement, system of theming with CSS custom properties, etc.
The library is not ready yet to be open-sourced, but I hope it will as it sounds promising.
So the React's future looks bright as the team always wants to push the boundaries on how we can build user interfaces. We must be patient about the next features, especially for Concurrent mode (the concepts were imagined 4 years ago !), as it creates some new concepts for UI framework and it looked really hard to implement.
What are the next things you look forward to? Comment below, I'm curious! But anyway, I hope you are as excited as I am!
Top comments (0)