React Suspense & Concurrent Mode
The React Team has been working hard on the upcoming Concurrent Mode features. What will these features mean for the React Community?
The front end of web has been overwhelmed by JavaScript Frameworks. Just as you’ve learned one, another pops up and we start to question how long this game of “whack-a-mole” can go on for. Or at least, this has been the case for the last few years.
There have been a few that have stood from the crowd — often backed by tech giants — and they’ve all got great features to offer. Google maintained Angular is a fantastic tool that shines on large projects by utilizing typescript out-of-the-box, and treating Observables as a first class citizen. Vue — started and maintained entirely in the Open-Source community — has incredible documentation, their own video courses, and has been adopted by the PHP framework Laravel for it’s go to front-end framework.
However, this post is about React, and more specifically its horizon. Started and maintained at Facebook, React has a history of maintaining stable releases while also pushing out game changing features. In February of 2019, the React Team made another step toward implementing their Fiber Architecture with the release of “hooks”. This was a fundamental shift in the way React developers produced their apps, with everything moving closer to the functional paradigm.
In a strict, academic-Computer-Science sense, JavaScript doesn’t support functional programming, but it does have the properties of a dynamically typed functional language. And React has been steadily moving away from the object-oriented paradigm, and towards this functional approach. It’s important to note here that React doesn’t advertise itself as a framework, in fact, the heading on their homepage is “A JavaScript library for building user interfaces”.
So, React is a library for building UI, and is becoming more functional. What does that mean from the perspective of a developer? It means that every piece of your view is just the return value of a function. It means that every data value we calculate, and every piece of business logic we derive, can be the result of a function. Since functions are just JavaScript, it means React is moving closer to its tagline of being a JavaScript library. It means: If you’re good at JavaScript, you’re good at React.
This leads to the meat of this article — what is on the horizon for the React Community? Asynchronous — interruptible — rendering.
Concurrent Mode is the set of new, still experimental, features being introduced to React. These features are the next logical step in the functional, JavaScript-first, approach the React Team has been taking.
Asynchronous functions have long been a part of JavaScript, but up until this time, React has only supported synchronous rendering. When we get the release of the new Concurrent Mode features, we will see another fundamental shift in the way developers write React apps. We will be able to use asynchronous functions, and promises, to drive our rendering: unresolved promises will have a fallback, and once the promise returns a value, we’ll render the component as expected. This release will also see a dramatic improvement in the way users respond to these apps.
If you’ll recall, the React Team is sponsored by Facebook, and thus has access to the research and development Facebook performs. Having the world’s two most popular social media sites as a playground provides a lot of opportunity to learn about user interaction. One of the results of this research is outlined in the Concurrent Mode docs: “displaying too many intermediate loading states when transitioning between screens makes a transition feel slower”.
This problem will be addressed in the new Concurrent Mode features. As mentioned before, we can use Promises to drive our rendering, but the base behaviour will ensure the user doesn’t experience too many loading states, or more importantly, that the user experiences “intentional loading sequences”.
As JavaScript grows, the spirit of that growth is engendered in the community. The move toward Concurrent Mode, and React Fiber in general, is a reflection of the React Team aligning with the JavaScript community. By integrating closer with the fundamentals of JavaScript, React is continually improving the experience of development. This allows React developers to pay that experience forward in their applications and ultimately, their users. It’s an exciting time to be a part of the JavaScript community, as we move our horizon forward.
Lauchlan did a talk on React Suspense at the Halifax React Meetup on April 21, 2020. Check out the video recording here, the slides used here, and the App used in the demo here (codesandbox if you want to see the code).
REDspace is a software development company that builds innovative, custom, and flexible platforms for global enterprises. We combine well-built backends with engaging front-end user experiences. redspace.com.
