React Conf 2021: Keynote Takeaways

Young

·

Follow

2 min read

·

Mar 30, 2022

--

Listen

Share

Communication between designers and developers

• Speaking different languages: UX lost in translation. React comes to the rescue! It’s not about the technology. It’s about what technology enables.
• North Star: to make it easier to build great UX

Suspense

• React data over the network as quickly as props or state. Expands what the component can be
• In 16–17: Suspense only can be used on the client. useEffect is not adequate for data fetching. Instead, we use the 3rd party library, i.e., Apollo client.
• Getting the items and showing the loading state don’t need to exist together. Setting the loading data makes the overhead.
• Let’s separate those two things. There’s no loading boolean anymore! It doesn’t matter if the data fetching is synchronous or asynchronous.
• What about the loading state? Use <Suspense /> from the nearest parent component. We think the right place for the loading state is inside the JSX.

Some exciting technological implications

• Use suspense for controlling any types of asynchronous data.
• 16–17: Loading JS bundles for code splitting
• 18: Now it works on the server. Streaming server rendering: send the fallback skeleton first from the server.
• 18: Data fetching via compatible libraries like Relay
• But a lot of people don’t use Relay 😅 Next step: General support for data fetching. I hope to make this widely available in the ecosystem.

18 Features

• Automatic update batching
• useId: a hook for generating random id. Aria attributes for a11y!
• Opt-in new features: startTransition, useDefferedValue, streaming SSR with Suspense
• Concurrent rendering. How does it impact the end-user? It’s a behind-the-scenes capability in React. You don’t need to think about it when you are writing components. It took pretty long to meet the high standard.
• Concurrent mode: abandoned adoption strategy

Upgrade 18 will be the first step toward exciting features

• Sever components: Run only on the server. Directly access server-side data sources. Zero bundle size impact. Hydrogen and Next.js rely on the server components.
• Concurrent rendering: Inspired by the problem we found from React Native
• React is for every platform, not only for the web. React is a paradigm for building UI. It’s more than a library.
• React 18 in React Native!
• React Vision: Seamlessly connect between the client and the server. You don’t have to choose which technology to use on each side.