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.

🎉 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