📘 Building the New Facebook.com

At F8 this week, the new Facebook.com was revealed. This talk takes a deep dive into the new UI architecture and explains how the latest React features are used to build a high quality user experience.

https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay

🕳 Add Suspense Boundary Context and unstable_avoidThisFallback

The new suspense boundary context will be used to implement longer suspense in case it is undesirable to show a certain fallback state.
The first usage of this is the unstable_avoidThisFallback property that can be used to avoid fall back to the outer most suspense boundary.

https://github.com/facebook/react/pull/15578

🛠 Experimental DevTools: Add Suspense Toggle to All Elements

You can now toggle suspense on every element in the experimental DevTools. If the component is not in a suspense boundary, it will also show a warning.

https://twitter.com/brian_d_vaughn/status/1126182658864599040

⚠️ Warn When Suspending at Wrong Priority

This change adds a warning when components suspend during a user-blocking update. The warning recommends to schedule suspending updates via Scheduler.next instead.

https://github.com/facebook/react/pull/15492

🎇 React Flare Updates

Continuing the work of the past few weeks, the team worked on adding React.unstable_createEventComponent, more press event properties, server-side hit slop rendering, and a lot of other bug fixes.

https://github.com/facebook/react/issues/15257

🎽 Fix Interaction Tracing for Batched Update Mounts

This PR fixes an issue with interaction tracking that occurred when a root was mounting inside a batched update.

https://github.com/facebook/react/pull/15567

🔋 Batched Mode and

ReactDOM.unstable_createSyncRoot
Batched Mode is a new unstable React mode that ensures that updates are always batched while still doing all rendering without interruption. It can be opted in with the new ReactDOM.unstable_createSyncRoot API.

https://github.com/facebook/react/pull/15502

🌀 Add withSuspenseConfig API

The new unstable_withSuspenseConfig() API can be used to schedule updates with a different suspense config. This can be used to implement busy spinners.

https://github.com/facebook/react/pull/15593

👋 Remove <React.unstable_ConcurrentMode />

Partial opt-in into Concurrent Mode creates edge cases that are not trivial to support. Instead, the recommended approach is to opt in the entire root.

https://github.com/facebook/react/pull/15532

🧪 Flush the Scheduler Manually inside act()

With this PR, the act() test helper is now manually flushing the Scheduler using Scheduler.unstable_flushWithoutYielding internally.

https://github.com/facebook/react/pull/15591

🕹 Fix Serial Passive Effects

This change makes sure that passive effects are flushed before discrete event handlers are called.

https://github.com/facebook/react/pull/15650

⏲ Remove Scheduler from React Package Dependencies

The isomorphic react package no longer depends directly on the scheduler. Now, only the individual renderers (e.g. react-dom) do.

https://github.com/facebook/react/pull/15616

🙅‍♀️ Invariant When Committing Wrong Tree

This change adds a new invariant that throws if the new tree is the same as the old one.

https://github.com/facebook/react/pull/15517

🎇 React Flare Updates

Another week of great improvements for the experimental event API that the team at Facebook is working on. preventDefault now work for nested updates, a pointerType was added to to Focus events, getFocusableElementsInScope handles suspended trees, and more.

https://github.com/facebook/react/issues/15257

🛑 Bail out of Updates in Offscreen Trees

With this change, sync updates inside hidden trees are now delayed when using Concurrent Mode.

https://github.com/facebook/react/pull/15666

🎫 Upcoming GitNation Events

While we are here, I want to point out a few of the upcoming events from the fantastic folks at GitNation. If you have the chance, I recommend checking out one of their conferences this year:
• JS Nation, Amsterdam, June 5–7
• React Advanced, London, Oct 25
• React Day Berlin, Berlin, Dec 6

🔄 React Fresh

The team started to work on React Fresh, a new generation of hot reloading. Changes include initial scaffolding, infrastructure, and Babel plugin implementation

Check out this Tweet by Dan Abramov for a teaser and some insights:
https://twitter.com/dan_abramov/status/1126948870137753605?s=20

🛠 Inform DevTools of Commit Priority Level

React now exposes information about the commit priority level to DevTools.

https://github.com/facebook/react/pull/15664

🧪 Flush Only on Exiting Outermost act()

act() will now only flush on exiting the outermost callback. This changes the behavior of nested act()s.

https://github.com/facebook/react/pull/15682

🇭🇺 Hungarian Localization

You can now help translate the official React documentations to Hungarian.

https://github.com/reactjs/reactjs.org

👷‍♀️ Parallelize CircleCI Jobs Using Workflows

The React repository CI tests now using the CircleCI Workflows feature. This improves status reporting in GitHub.

https://github.com/facebook/react/pull/15704