⚠️ Change Warning for Unacted Effects
A warning is now only issued for unacted effects inside strict and non-sync modes.

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

How using component-based design helps us build faster

This post breaks down how using a component-based design (which includes React) has helped Twitter build across all platforms.

How I ruined my application performances by using React context instead of Redux

Georges used React contexts instead of Redux for centralized states. Without a selector system, his components where getting lots of data as props, some of them were often changing and not necessary to build the view. This post is how he fixed it.

Concurrent Mode explained

Is Concurrent Mode just a workaround for “virtual DOM diffing” overhead? In this Twitter thread, Dan breaks it down.

Authenticated Routing with React, React Router, Redux & TypeScript

In this post, Fred shares how they went about authentication at Octopus Wealth utilising react-router-dom, react-redux & TypeScript.

Build your own React

How does React really work? In this talk, you'll find out. You'll write a simplified version of React from scratch, based on the real source code, including: jsx, fibers, reconciliation, hooks, and more.

A Deep Dive into React-Redux

Redux and React are frequently used together, and many people are familiar with the "Provider" and "connect" APIs from React-Redux. But how does React-Redux work, and why do we even need it in the first place? Join Redux maintainer Mark Erikson on a journey through the history and internals of React-Redux.

📌 useSubnoscription Hook

Similar to the createSubnoscription helper, the React team now maintains a useSubnoscription hook.

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

🎇 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.