After one year of absence in 2020, the React Conf 2021 has returned as an online event. Packed with many exciting talks and is free for everyone. It didn’t come as a surprise that speakers were talking about the upcoming React 18 release and its features most of the time. I watched the whole event (over 5 hours), and I’d like to share the key takeaways.

React Conf 2021 - TL;DW summary

React 18 and its subsequent releases will focus on a better user and developer experience. It’s becoming a universal platform for making web, mobile, desktop, and VR (yes, VR!) applications. On the slides, we could see slogans like React - learn once, write anywhere (I felt some jQuery vibes here :)) and React is a paradigm for building user interfaces. React team is proud of their new docs (if you haven’t seen them: http://beta.reactjs.org), so they used a few conference minutes to present how (and why) they were created. The hottest topic was React suspense and server components - the second one won’t be included in the first release of React 18, which is in the RC phase right now, and it’s super easy to update and start using it.

Keynote

The keynote was about the current state of the React environment and the new features of React 18. The suspense was introduced as a problem solver for better code readability and user experience. You don’t have to worry about loading states anymore and move them to where they belong - the suspense component in JSX with fallback prop.

Another cool feature included in the upcoming release is automatic batching of setState hooks. React will look after multiple calls for the setState and batch them to optimize the rendering of our app.

You may hear about React’s “concurrent mode” - well, it’s history now. React team dropped that naming, and it’s using “concurrent features” now. The reason behind the change is that it’s not an operational mode for React, which has been confusing for many developers. I agree; now it’s more precise.

The next part was about introducing server components that’ll also use suspense. They’re still experimental and won’t be included in the first version of React 18, but later in a minor update.

The part about React Native was about the mutual inspiration of different parts of React ecosystem. “We’re building React together, using the best part of every platform.” slide confirms that. The team is rewriting the core of React Native to be synchronous, which will enable compatibility with new concurrent features. No release dates were given thou.

Video: https://www.youtube.com/watch?v=FZ0cG47msEk

React 18 for app developers

I highly recommend watching this talk - you’ll learn how to update your app and use the new features of React 18 right away. An update is effortless - you’ll need to install React 18 with your favorite package manager and change one thing - the way of loading you’re app from this:

ReactDOM.render(<App />, container);

to this:

const root = ReactDOM.createRoot(container);
root.render(<App />);

One of my favorite parts was showing how to use a useDeferredValue hook. It acts similarly to the good old debounce function but smarter. It unblocks your UI when doing some heavy operations and activates itself only when needed.

Video: https://www.youtube.com/watch?v=ytudH8je5ko

Streaming Server Rendering with Suspense

This talk was about using concurrent features in server-side rendering. You don’t have to use the all-or-nothing strategy anymore. Thanks to the Suspense, you can load things progressively and prioritize which component should be hydrated first by watching the user interactions. The best thing is that it works out of the box and will fix many UX problems for you.

Video: https://www.youtube.com/watch?v=pj5N-Khihgc

The first React Working Group

An excellent introduction on how React Working Group has been assembled and what its goals are. We could learn how the working group uses the community’s power to deliver new and work on updates for the old features. In general, React Working Group makes our lives as React developers easier.

Video: https://www.youtube.com/watch?v=qn7gRClrC9U

React Developer Tooling

React Developer Tooling team introduced new features for the dev tools. New things worth mentioning are: showing the hooks name, updated profiler, and new timeline view, which will show you how your app is working with screenshots and suggestions (that looks cool!). useDeferredValue has been mentioned again in this talk :)

Video: https://www.youtube.com/watch?v=oxDfrke8rZg

React without memo

In the times of memo all the things! our code is starting to be less readable. The idea presented in this talk is to create an automatic optimization compilator, which will add memoization on the fly without obfuscating our code. Right now, it’s just a prototype called forget that is being developed and might not be successfully released at all. I keep my fingers crossed for this project!

Video: https://www.youtube.com/watch?v=lGEMwh32soc

React Docs Keynote

New docs are fantastic! We can learn the reasons for creating completely new documentation and how the process looked. Now we’ll get many interactive examples and challenges working right on the documentation page. Excellent, truly next-generation learning platform, and I love it!

Video: https://www.youtube.com/watch?v=mneDaMYOKP8

Things I learnt from the new React docs

Great talk about learning React, using new docs vs. old docs. Many a-ha moments right-spotted thanks to the new docs. If you’re a beginner, the talk is a must-watch!

Video: https://www.youtube.com/watch?v=-7odLW_hG7s

Learning in the Browser

You’ll hear about the online code editors for creating react apps in your browser in this talk. When I started my journey with React, there were no such tools, so it’s nice to see that you don’t have to install anything on your computer to start learning.

Video: https://www.youtube.com/watch?v=5X-WEQflCL0

The ROI of Designing with React

This talk discusses how developers and designers communicate and how communication improves when designers learn something about React. We can understand the similarities between Figma and React components. To sum up - it’s always good to know at least something about the technology as a designer and the design tools when you’re a developer.

Video: https://www.youtube.com/watch?v=7cPWmID5XAk

Interactive playgrounds with React

It was a nice talk related to the interactive content included in the new React Docs. When learning new things, it’s hard to focus on the whole context but easier when we focus on small items. MDX can help you in creating interactive content.

Video: https://www.youtube.com/watch?v=zL8cz2W0z34

Re-introducing Relay

If you’re using GraphQL in your app, you should watch this talk. Relay solves many problems with querying your data source, and it doesn’t break the component isolation and optimizes your queries. Reason locally, optimize globally! Thanks to the close cooperation between Relay & React teams, the new version of Relay is React 18 ready.

Video: https://www.youtube.com/watch?v=lhVGdErZuN4

React Native Desktop

Did you know that the Messenger app on desktop uses React Native? In this talk, you’ll listen to how React Native simplifies the development of multiplatform applications. In the second part, Microsoft showed some examples of how React Native fits their Windows ecosystem. You can learn more about React Native Desktop here: https://microsoft.github.io/react-native-windows/

Video: https://www.youtube.com/watch?v=9L4FFrvwJwY

On-device Machine Learning for React Native

That was a live-coding demo. We witnessed the creation of a simple React Native app with a machine learning model behind it. The app’s goal was to identify objects using the phone’s camera, specifically figures of characters from Mario games. Spoiler alert: it worked :)

Video: https://www.youtube.com/watch?v=NLj73vrc2I8

React 18 for External Store Libraries

If you’re an external store library developer, this talk is for you. Watching the code examples, you’ll see and understand challenges that stand before library maintainers to make their work compatible with the newest React release.

Video: https://www.youtube.com/watch?v=oPfSC5bQPR8

Building accessible components with React 18

I’m super happy that this talk has been presented at the React Conf. Accessibility is often omitted when developing a web app. Practical demo showing the creation of accessible combobox using freshly created Ariakit package (https://www.npmjs.com/package/ariakit), and useDeferredValue hook for handling async queries. It was one of my favorite talks from this conference. Check the live demo here: https://codesandbox.io/s/building-accessible-components-with-react-18-zfrcu?file=/pages/index.js

Video: https://www.youtube.com/watch?v=dcm8fjBfro8

Accessible Japanese Form Components with React

I’ve learned that Japanese HR forms are extra complicated from this talk. What I’ve missed is the real solution to the problem. We just got a short demo of the extensive form, built with the component system https://github.com/kufu/smarthr-ui

Video: https://www.youtube.com/watch?v=S4a0QlsH0pU

UI Tools for artists

That was a short talk about how Netflix uses React to build tools for visual artists/filmmakers. It includes a cool demo of pasting an image directly from the clipboard. Github link: https://github.com/lyle/react-conf-2021

Video: https://www.youtube.com/watch?v=b3l4WxipFsE

Hydrogen + React 18

The final talk was about Shopify’s new hot Hydrogen storefront. It uses server components & suspense. Hydrogen is in the alpha stage, but it will benefit from all-new features of React 18. You can check a demo here https://hydrogen.new

Video: https://www.youtube.com/watch?v=HS6vIYkSNks

Final thoughts

Online event formula is challenging, but this year React Conf proves that it can be done in a good way. I love the switch from 4-5 long to 19 short talks, and we got much more points of view on different topics. Also, the videos are much easier to re-watch.

I’m looking forward to watching the next React conf!