{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2021/12/17/react-conf-2021-recap.html","result":{"data":{"markdownRemark":{"html":"

Last week we hosted our 6th React Conf. In previous years, we’ve used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features.

\n

This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events.

\n

All the talks are available to stream online.

\n

Here’s a summary of what was shared on stage:

\n

React 18 and concurrent features

\n

In the keynote, we shared our vision for the future of React starting with React 18.

\n

React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release.

\n

This means there is no concurrent mode, only concurrent features.

\n

In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native.

\n

Watch the full keynote from Andrew Clark, Juan Tejada, Lauren Tan, and Rick Hanlon here:

\n
\n

React 18 for Application Developers

\n

In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year.

\n

To try the React 18 RC, upgrade your dependencies:

\n
npm install react@rc react-dom@rc
\n

and switch to the new createRoot API:

\n
// before\nconst container = document.getElementById('root');\nReactDOM.render(<App />, container);\n\n// after\nconst container = document.getElementById('root');\nconst root = ReactDOM.createRoot(container);\nroot.render(<App/>);
\n

For a demo of upgrading to React 18, see Shruti Kapoor’s talk here:

\n
\n

Streaming Server Rendering with Suspense

\n

React 18 also includes improvements to server-side rendering performance using Suspense.

\n

Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use Suspense to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster.

\n

For a deep dive, see Shaundai Person’s talk here:

\n
\n

The first React working group

\n

For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as useId, useSyncExternalStore, and useInsertionEffect.

\n

For an overview of this work, see Aakansha’ Doshi’s talk:

\n
\n

React Developer Tooling

\n

To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps.

\n

For more information and a demo of new DevTools features, see Brian Vaughn’s talk:

\n
\n

React without memo

\n

Looking further into the future, Xuan Huang (黄玄) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype:

\n
\n

React docs keynote

\n

Rachel Nabors kicked off a section of talks about learning and designing with React with a keynote about our investment in React’s new docs:

\n
\n

And more…

\n

We also heard talks on learning and designing with React:

\n\n

Talks from the Relay, React Native, and PyTorch teams:

\n\n

And talks from the community on accessibility, tooling, and Server Components:

\n\n

Thank you

\n

This was our first year planning a conference ourselves, and we have a lot of people to thank.

\n

First, thanks to all of our speakers Aakansha Doshi, Andrew Clark, Brian Vaughn, Daishi Kato, Debbie O’Brien, Delba de Oliveira, Diego Haz, Eric Rozell, Helen Lin, Juan Tejada, Lauren Tan, Linton Ye, Lyle Troxell, Rachel Nabors, Rick Hanlon, Robert Balicki, Roman Rädle, Sarah Rainsberger, Shaundai Person, Shruti Kapoor, Steven Moyes, Tafu Nakazaki, and Xuan Huang (黄玄).

\n

Thanks to everyone who helped provide feedback on talks including Andrew Clark, Dan Abramov, Dave McCabe, Eli White, Joe Savona, Lauren Tan, Rachel Nabors, and Tim Yung.

\n

Thanks to Lauren Tan for setting up the conference Discord and serving as our Discord admin.

\n

Thanks to Seth Webster for feedback on overall direction and making sure we were focused on diversity and inclusion.

\n

Thanks to Rachel Nabors for spearheading our moderation effort, and Aisha Blake for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events.

\n

Thanks to our moderators Jesslyn Tannady, Suzie Grange, Becca Bailey, Luna Wei, Joe Previte, Nicola Corti, Gijs Weterings, Claudio Procida, Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and Xuan Huang (黄玄).

\n

Thanks to Manjula Dube, Sahil Mhapsekar, and Vihang Patel from React India, and Jasmine Xie, QiChang Li, and YanLun Li from React China for helping moderate our replay event and keep it engaging for the community.

\n

Thanks to Vercel for publishing their Virtual Event Starter Kit, which the conference website was built on, and to Lee Robinson and Delba de Oliveira for sharing their experience running Next.js Conf.

\n

Thanks to Leah Silber for sharing her experience running conferences, learnings from running RustConf, and for her book Event Driven and the advice it contains for running conferences.

\n

Thanks to Kevin Lewis and Rachel Nabors for sharing their experience running Women of React Conf.

\n

Thanks to Aakansha Doshi, Laurie Barth, Michael Chan, and Shaundai Person for their advice and ideas throughout planning.

\n

Thanks to Dan Lebowitz for help designing and building the conference website and tickets.

\n

Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks.

\n

Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages.

\n

Finally, thanks to all of our participants for making this a great React Conf!

","excerpt":"Last week we hosted our 6th React Conf. In previous years, we’ve used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference…","frontmatter":{"title":"React Conf 2021 Recap","next":null,"prev":null,"author":[{"frontmatter":{"name":"Jesslyn Tannady","url":"https://twitter.com/jtannady"}},{"frontmatter":{"name":"Rick Hanlon","url":"https://twitter.com/rickhanlonii"}}]},"fields":{"date":"December 17, 2021","path":"content/blog/2021-12-17-react-conf-2021-recap.md","slug":"/blog/2021/12/17/react-conf-2021-recap.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React Labs: What We've Been Working On – June 2022"},"fields":{"slug":"/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html"}}},{"node":{"frontmatter":{"title":"React v18.0"},"fields":{"slug":"/blog/2022/03/29/react-v18.html"}}},{"node":{"frontmatter":{"title":"How to Upgrade to React 18"},"fields":{"slug":"/blog/2022/03/08/react-18-upgrade-guide.html"}}},{"node":{"frontmatter":{"title":"React Conf 2021 Recap"},"fields":{"slug":"/blog/2021/12/17/react-conf-2021-recap.html"}}},{"node":{"frontmatter":{"title":"The Plan for React 18"},"fields":{"slug":"/blog/2021/06/08/the-plan-for-react-18.html"}}},{"node":{"frontmatter":{"title":"Introducing Zero-Bundle-Size React Server Components"},"fields":{"slug":"/blog/2020/12/21/data-fetching-with-react-server-components.html"}}},{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}}]}},"pageContext":{"slug":"/blog/2021/12/17/react-conf-2021-recap.html"}},"staticQueryHashes":[]}