🎇 React Flare Updates

• 🔥 Redesign Core Event System
• Keyboard Responder
• Input Responder
• FocusWithin Responder

🎬 SuspenseList: tail="hidden"

A new tail="hidden" option was added to SuspenseList that hides all rows in the tail.

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

🛠 DevTools: Automatic Component Stacks

The upcoming DevTools v4 release will add an option to append a component stack when warnings or errors are logged.

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

🦄 Unify Deprecated/Unsafe Lifecycle Warnings

This PR reworks some of the messages behind the deprecated or unsafe lifecycle warnings.

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

🌀 Add suspenseCallback for Runtime Tracing of Loading States

When the new feature flag is enabled, the suspenseCallback property on a suspense boundary will be called during the commit phase.

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

🌍 React Docs Localizations

The Arabic localization is now online.

https://ar.reactjs.org/

⚠️ Warn When Using DefaultProps on Function Component

This change adds a warning when using defaultProps on a function component as part of the createElement changes.

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

🧽 Clean Up nextEffect Pointer

This changes avoids the nextEffect pointer of live fiber nodes to point to unmounted fiber nodes.

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

🔄 Fresh: Track Unrecoverable Errors

React Fresh now tracks unrecoverable errors so that the module environment can properly react to it by, for example, doing a full reload.

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

⏰ Scheduler Updates

• Use requestIdleCallback to Post First Callback
• Test Browser Implementation Details
• Add Names to Inline Functions

Premature Optimize the Heck Out of Your React Apps Using Memoization

This article will take a simple non-optimized React app and then incrementally improve the app's performance by using the useCallback and useMemo hooks, along with the React.memo higher order component.

Build a React Switch Toggle Component

Learn how to build a React switch component using the native HTML checkbox input! You’ll learn plenty about React checkboxes in the process.

Animate React with Framer Motion

Framer-motion is a library that powers animations in Framer. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with a minimal amount of code. In this article, you’ll start with very basic animations and gradually move to the more advanced ones.

🎉 React v16.9

A new minor version of React is out! It includes new deprecations, async act(), <React.Profiler> and more. Make sure to also check out the updated timelines for future features in the announcement post.

https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

🗼 Babel 7

This change upgrades the codebase from using Babel 6 to Babel 7.

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

📝 Testing Docs

The documentation now features a new testing section. The documentation includes explanation of different tradeoffs, common patterns, and different test environments.

https://reactjs.org/docs/testing.html

✍️ Profiler API Docs

This new documentation entries explain how to use the <Profiler/> API.

https://reactjs.org/docs/profiler.html

⏰ Scheduler: Yield Many times per frame, No rAF

A new experimental flag that changes the scheduling logic to yield many times per frame instead of guessing the next VSync using requestAnimationFrame.

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

⏳ Scheduler: Store Tasks on a Min Binary Heap

A min binary heap has better performance characteristics for implementing a priority queue.

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

🎇 React Flare Updates

• Tweaks to Flare System Design and API
• Add ContextMenu Responder
• Remove FocusScope Responder

🔄 Fresh Updates

• Transfer Refs When Remounting
• Support Multiple Renderers at the Same Time