Summary
Among other things, during React Conf 2021 we learnt about central ideas in the React project that are driving this ecosystem forward.
A key idea in React is that “developers and designers should be able to build together while sharing the same design language” - which React thinks should be - components - or more precisely - JSX. A company very dear to my heart, Framer, was mentioned as a great tool for this exact purpose.
React markets itself as the tool to “learn once, write anywhere” and this tagline has been reaffirmed during the conference through the initiatives that look to bring React to many new platforms, including Desktop and VR.
In addition, the core team has affirmed their commitment to making no compromises on the user or the developer experience - making sure that React is the platform which gets the best from both the server side and the browser.
I’ve split the contents of this video into several sections, with each focusing on a particular theme from React Conf or React 18.
⚛️ React 18
React 18 was formally announced at React Conf, with Suspense and Concurrent rendering being the central features.
This upcoming React release will see these notable improvements which are available out of the box:
- Better rendering performance
- Automatic update batching
- useId - a hook for generating unique IDs across server and client
In addition to these improvements, React 18 will offer several new fully opt-in features:
- Streaming SSR with Suspense
- useDeferredValue - a hook for deferring a value by making it a lower priority for renders
- startTransition - an API which allows us to tell React that a state update should be of a lower priority
⬆️ React 18 Upgrade
Upgrading to React 18 will require minimal changes to the codebase.
React 18 does introduce the ReactDOM.createRoot function which replaces “ReactDOM.render” function from React 17 and below. If you’re using a React framework like Next.js you won’t need to do anything to make this change - but if you’ve written your React app from scratch you’ll have to make this change yourself.
In earlier candidate releases of React 18, something called “Concurrent mode” was proposed. “Concurrent mode” has caused some debate in the community because it made the upgrade path from React 17 not straightforward.
I’m pleased to let you know that “Concurrent mode” is nowhere to be found in React 18 anymore, and the upgrade path is entirely: opt-in. The features previously proposed to be part of “Concurrent mode” are now instead part of “Concurrent rendering” which is a major reason for the excitement around React 18.
The stable Release candidate for React 18 is now available and the first eagerly anticipated release of React 18 is planned for early 2022.
🚧 Server Components
Server Components are a React feature which allows parts of the React UI to be completely rendered on the server and then sent to the browser as HTML with 0 impact on the JavaScript bundle size.
Unfortunately, Server components are still a work in progress and won’t be available in React 18, but they’re expected to ship in one of the minor versions of version 18.
Also, note that a Server Components Working Group has been created to facilitate open discussion about this impactful feature.
✨ Suspense Overview
The goal of the Suspense API is for a React application to be able to read data over the network as easily as it can read props or state.
In other words, you can think of Suspense as a way to decouple the component from its loading state. A Component’s loading state is represented by a “fallback”, for example, a loading spinner of some sort.
Experienced React developers might ask themselves: “Yes, but why would I use Suspense, I already know how to handle loading state in my apps!” - and they would be right, since everything Suspense does can already be accomplished by stitching together React primitives like useState and useEffect.
From what I gathered, there are two major reasons to use Suspense:
- Cleaner code: Handling state in a React application is unnecessarily verbose and repetitive and Suspense allows us to remove these repetitions, making the code more pleasant to read.
- Performance improvements: It turns out that if we tell React about the component and its loading state - through using Suspense - React can use this information to make our application faster.
👁 Suspense use-cases
You might wonder: “So what are the ways that React can improve the performance of my app if I use Suspense?”. Here we arrive at the use-cases for Suspense in React 18 and as of now there are three of them:
“Code splitting” using React.lazy which is already available in React 17. React.lazy allows us to dynamically import React components and therefore lazy load their JavaScript bundles. Frameworks like Next.js can use this feature to improve “Code Splitting” for us, which I think is great - but from my experience in the application code, this feature is a bit underwhelming and not used very often. Luckily for us “Code splitting” wasn’t the main intended use-case for Suspense.
”Streaming server rendering” - and it is a major performance improvement of React 18 and it’s powered by Suspense and Concurrent Rendering. To illustrate what ”Streaming server rendering” does, first imagine the steps that a typical server-rendered React page goes through:
- On the server, data is fetched for the entire page
- On the server, HTML is rendered for the entire page
- In the browser, we load the HTML, stylesheets and JavaScript for the entire page
- In the browser, we hydrate the entire page
The use-case of suspense which I’m most excited about is “Data fetching”. This is the use-case whose adoption will eliminate a lot of repetitive code from codebases. It’s important to note that in the initial releases of React 18, this feature is not going to be generally supported, meaning that in React 18.0 you’ll be able to use “Data fetching” only if you’re using Relay as well, since, for obvious reasons, the Relay team has collaborated with the React team to add the required support for Suspense.
That said, the low level APIs for “Data fetching” Suspense support are expected to land in one of the following React releases and as soon as these low level APIs are out, I expect client libraries like Apollo, SWR and ReactQuery to add support for Suspense - which will make my life a whole lot easier.
📱 React Native
“Concurrent Rendering” - the core feature that powers React 18 - was originally inspired by problems found whilst developing React Native. All other mobile frameworks were concurrent so React Native needed to be concurrent as well.
Since being introduced into React Web - “Concurrent Rendering” has first enabled improved performance and better responsiveness. Later it has proven to be an effective programming model as well, allowing for features like “Code Splitting”, “Data Fetching”, “Streaming Server Side Rendering” and “Server components” to be built on top of it.
It seemed to me from React conf that the React team looks at React as a single programming paradigm that gets enhanced overall by incorporating solutions to problems from each platform it runs on - this is known as the “Many Platforms Vision” for React.
The React team already has the experience of solving the low-memory limitation on Android - and after enabling this feature on iOS they have seen the improved performance for React Native on iOS as well! If the improvements from each platform can cumulatively add to the overall improvement of the React core-library, that would be truly remarkable.
The last thing I’ll mention here is that there is now a React Native Desktop, which is an initiative by Meta and Microsoft to have React run on MacOS and Windows. As of now, I haven’t seen any mentions of Linux, which is interesting.
Meta’s experiment with porting Desktop Messenger from Electron to React Native Desktop has resulted in tremendous improvements in the app bundle size, cold-start latency and the overall snappiness. I personally welcome a TypeScript alternative to building desktop applications - so this seems really cool.
🔬 React Tooling
A talk at React Conf covered React Developer Tooling and these are my takeaways:
React Dev Tools aim to improve the:
- Productivity
- Debugging
- App performance
for developers working on React Applications.
They’re delivered mostly as either:
- A browser extension
- A tool embedded into the development sandbox itself
Since recently, React Dev Tools can use sourcemaps to enhance the information available for the developer.
Up until recently the Profiler was the predominant React Dev Tool used for debugging and performance analysis, but now there’s a Timeline tool as well and in the future, the Profiler and the Timeline are expected to be merged into a single tool for performance analysis.
Besides React Developer Tooling - React Conf has also seen the re-introduction of Relay - which has been celebrated by Meta’s teams as the best framework for building apps which consume GraphQL data.
Relay has been adapted to work with the new Suspense API from React 18 and it’s therefore going to be the first library to support Suspense for data fetching. Relay has also seen a few other improvements, since I last took a look at it:
- The Meta team has rewritten its query compiler in Rust - so app builds should be much faster
- There’s newly introduced @defer and @stream directives which should improve the overall app performance
I personally wanted to give Relay a try, but I wasn’t able to find a good overview of how to use it with Next.js which I work with day to day, so I didn’t pursue it further but any suggestions in the comments are very welcome!
📝 React Community
The absolute centerpiece of the efforts by or for the React Community was the new React Documentation, currently accessible on beta.reactjs.org. I really like the new documentation. It has seen:
- A move to the “hook centric” curriculum
- A partnership with Codesandbox to provide interactive examples on every page
- Code challenges for every lesson
- Diagrams, illustrations, recipes, Search and even interactive theming.
Multiple speakers in React Conf 2021 have spoken highly of the new documentation site and I personally can’t wait for it to be finished.
Other community driven efforts from React Conf include:
React and Server Components working groups which aim to work in the open to ensure a high-quality of React releases
Interesting React experiments, like the experiment to automate away the use of React.memo and useMemo in React applications - by using a compiler- which very much reminds me of Svelte!
Useful information from community experts on how to migrate your library from React 17 to React 18 if your library provides an “external store”
🌍 The React Ecosystem
Many companies and individuals talked about their interesting projects during React Conf:
- A Meta developer demoed the use of pre-trained Machine Learning models in a mobile application built with React Native - which was really impressive
- Multiple teams have shown their approach to making their applications more accessible via their custom React libraries
- Multi-billion dollar companies have reported on how they’re using React to make their “animation studio app”, “custom storefronts” or “gaming console UIs” more interactive and performant