What did React Conf 2021 bring to React 18?

React Conf 2021 ended today. It revisited features such as useDeferredValue and introduced a DevTools timeline and React Forget for automatic memoization. This article covers the newly presented features for React 18.

useDeferredValueCopy Anchor Link

The early Concurrent Mode API documentation already described useDeferredValue. After the React 18 alpha, documentation focused on the related startTransition API instead.

The conference finally covered useDeferredValue and demonstrated it:

// ...

const [filters, mergeFilters] = useMergeState(defaultFilters);

const deferredFilters = React.useDeferredValue(filters);

return (
  <Fragment>
    <Breadcrumbs items={['Projects', name, 'Kanban Board']} />
    <Header />
    <Filters
      projectUsers={project.users}
      defaultFilters={defaultFilters}
      filters={filters}
      mergeFilters={mergeFilters}
    />
    <Lists
      project={project}
      filters={deferredFilters}
      updateLocalProjectIssues={updateLocalProjectIssues}
    />

// ...

Passing filters directly to <Lists> can cause slow updates on devices with limited CPU performance. useDeferredValue produces deferredFilters for that expensive work. React can discard outdated renders and use the latest filters instead.

Both useDeferredValue and startTransition are concurrent features. They mark updates as non-urgent so higher-priority work can interrupt them and keep rendering responsive.

In September, Dan explained that the team had not found a clear way to describe the hook. It covers situations where startTransition cannot be used.

React Developer Tooling - hooks, profile and timelineCopy Anchor Link

DevTools can now display hook namesCopy Anchor Link

DevTools supported hooks from their introduction, but it could not show their names. It can now retrieve source code through source maps and parse the AST to identify hook names.

The profiler explains why components render againCopy Anchor Link

The improved profiler shows update priority, what caused an update, and why a component rendered again.

TimelineCopy Anchor Link

The conference introduced a new React-specific timeline, similar to the performance tools in browser DevTools.

The timeline provides detailed information and suggests possible performance improvements:

It also shows Suspense states:

The timeline can include work outside React, such as JSON.parse:

React without memo - React ForgetCopy Anchor Link

To avoid unnecessary renders, React developers currently add memo, useCallback, and useMemo manually.

The demonstration starts with inefficient code. A few interactions can trigger two or three hundred renders:

Adding useMemo improves performance, but it adds manual work and requires careful reasoning about dependencies:

The React team is exploring React Forget, a compiler that adds more effective memoization automatically. It moves memoization inside components, analyzes dependencies, and checks when values or caches need to change:

React Forget remains an internal experiment. The team is investigating cases that increase bundle size or prevent memoization. I look forward to a release that improves both development and user experience.

Final thoughtsCopy Anchor Link

React 18 reached its release candidate stage alongside the conference. At the time of writing, a stable release was expected in two to four weeks, around early 2022. Server Components would not ship in the first release, but the other concurrent features already offer plenty to explore. Learning how to upgrade existing projects and use these features will take time.

Special thanks to C. T. Lin for reviewing this article.