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.
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.
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);
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.
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.
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.
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 :)
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!
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!
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!
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.
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.
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.
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.
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/
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 :)
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.
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
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
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
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
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!