8 Things We Learned at React Conf 2021

At Clair, we use React Native since it allows us to write cross-platform code that’s rendered in native platform UI for Android, iOS and web. So the Clair front-end team was excited to attend React Conf 2021 and learn what’s coming next for React and React Native. While Suspense was definitely the hot topic of the day, we also learned about a lot of other exciting developments. Here are some of our takeaways from this year’s event.

Suspense improves both the user and developer experience. Suspense provides a simple way to wait for some data or code to load and easily declare a loading state while we’re waiting. For us as developers, this makes our code so much simpler to write and for users, we are able to load data in the background without sacrificing their user experience. Shaundai Person of Netflix talked about streaming server rendering with Suspense and gave us a great breakdown of what’s going on behind the scenes when we use Suspense. She shared that Suspense helps break the work of rendering into pieces and tells React what to show when the data isn’t ready yet.

At Clair, we use a Loading component throughout our apps while data is still fetching, so with the upcoming release of React 18, we’re excited to try out Suspense and see how it can help simplify our code. A very simple example of how we might implement Suspense is below. We can wrap our AccountBalance component in Suspense and give it a fallback prop to tell React what to show while we’re waiting for the AccountBalance component to either finish loading or fetching the data it needs to load.

import React, { Suspense } from "react";
import { Text, View } from "react-native";
const AccountBalance = React.lazy(() => import("./AccountBalance"));
const App = () => {
return (
  <View>
    <Text>Welcome To Clair!</Text>
    <Suspense fallback={<Text>Loading...</Text>}>
      <AccountBalance/>
    </Suspense>
  </View>
 );
};

The React docs are getting a makeover. Rachel Nabors walked us through the new React docs and shared the link to the beta version. Some of the highlights include hooks-first material, partnering with CodeSandbox to bring interactive examples to the documentation and code challenges.

The React team views React and React Native as one and the same. This insight was shared by Ricky Hanlon during the keynote presentation. Ricky also shared that some exciting additions to React 18 like concurrent rendering came from issues they first encountered in React Native. The team saw an opportunity to take a challenge they faced in React Native and use it to improve the entire React ecosystem. He also emphasized the React team’s commitment to their many platform vision and how they aim to build React by using the best parts from every platform.

Upgrading to React 18 should require minimal effort. Shruti Kapoor gave us the rundown of what’s new in React 18 and a quick overview of how to upgrade. The good news is the upgrade shouldn’t take more than a few hours and most existing React apps should work with little to no changes.

You can quickly build accessible React components. Diego Haz guided us through a helpful demo of how to easily build and test accessible React components using third party libraries like Reakit and a screen reader like NVDA.

Many companies are leveraging React Native for desktop. During their talk, Eric Rozell and Steven Moyes shared how they’re using React Native to build desktop apps at Meta and Microsoft respectively. Both companies have several cross platform apps and developing them with React Native allows them to run well across all platforms. React Native enables both companies to build beautiful and performant apps that are able to leverage native platforms.

React dev tools will be helpful when working with new React 18 features like Suspense. Brian Vaughn led an informative demo of how to use React’s existing dev tools when working with newer functionalities of React and also shared some of the new tools available for developers.

All about machine learning for React Native. We were really impressed with Roman Rädle’s overview of PyTorch Live, a set of tools to make building AI-powered experiences for mobile easier. Powered by React Native and PyTorch Mobile, the open-source project brings together two communities to help empower others to easily discover, share and use machine learning models.

We’re hiring! Check out our careers page for more information about our open roles. Follow us on Twitter and LinkedIn to keep up with the latest Clair news.