🧨 React Flare: Basic Scroll Responder
This PR adds a basic
https://github.com/facebook/react/pull/15827
This PR adds a basic
Scroll event responder module to the current set of React Flare event responders.https://github.com/facebook/react/pull/15827
⏱ Change Suspending and Restarting Heuristic
This change adds a new principle for when we restart a render instead of continuing to completion. For more details, I recommend reading the full explanation in the PR and Dan’s notes at the end.
https://github.com/facebook/react/pull/15769
This change adds a new principle for when we restart a render instead of continuing to completion. For more details, I recommend reading the full explanation in the PR and Dan’s notes at the end.
https://github.com/facebook/react/pull/15769
🔄 React Fresh Updates
React Fresh, the new generation of hot reloading, is getting more updates:
• The babel plugin now handles HOCs
• Generate signatures for hooks
• Support classes by force-remounting on edit
React Fresh, the new generation of hot reloading, is getting more updates:
• The babel plugin now handles HOCs
• Generate signatures for hooks
• Support classes by force-remounting on edit
🔎 Lint Rule for Unminified Errors
This change brings a new lint rule for the React repository that logs an error when an invariant message is not part of the error code map. In addition to that, errors are no longer extracted automatically in CI.
https://github.com/facebook/react/pull/15757
This change brings a new lint rule for the React repository that logs an error when an invariant message is not part of the error code map. In addition to that, errors are no longer extracted automatically in CI.
https://github.com/facebook/react/pull/15757
🕸 Nested Discrete Events Across Systems
This patch fixes an issue when a legacy event is dispatched within a new event callback or vice versa by making sure that the inner event is not flushed.
https://github.com/facebook/react/pull/15796
This patch fixes an issue when a legacy event is dispatched within a new event callback or vice versa by making sure that the inner event is not flushed.
https://github.com/facebook/react/pull/15796
🎇 React Flare Updates
More work has been done on React Flare:
• Add onContextMenu to Press
• Ignore Keyboard Interactions on Text Input Children
• Add Event Position Properties to Hover Responder
• Improve Runtime Performance of Hit Target Intersection
• Thanks to Mateusz Burzyński (Andarist), Alt+Tab is now properly handled on macOS.
Don’t forget to check out the umbrella issue for more details:
https://github.com/facebook/react/issues/15257
More work has been done on React Flare:
• Add onContextMenu to Press
• Ignore Keyboard Interactions on Text Input Children
• Add Event Position Properties to Hover Responder
• Improve Runtime Performance of Hit Target Intersection
• Thanks to Mateusz Burzyński (Andarist), Alt+Tab is now properly handled on macOS.
Don’t forget to check out the umbrella issue for more details:
https://github.com/facebook/react/issues/15257
🖱 Support for User-Blocking and Continuous Events
Events like hover are more important than others but do not need to be processed serially.
https://github.com/facebook/react/pull/15811
Events like hover are more important than others but do not need to be processed serially.
https://github.com/facebook/react/pull/15811
🔋 Add Batched Mode Variant to Fuzz Tester
The Suspense test fuzzer now tests the new Batched Mode in addition to the Concurrent Mode and the Legacy Sync Mode.
https://github.com/facebook/react/pull/15734
The Suspense test fuzzer now tests the new Batched Mode in addition to the Concurrent Mode and the Legacy Sync Mode.
https://github.com/facebook/react/pull/15734
📦 Update Release Script to be Workspace Aware
The automated release noscripts are now aware of the newly used Workspace feature of CircleCI.
https://github.com/facebook/react/pull/15809
The automated release noscripts are now aware of the newly used Workspace feature of CircleCI.
https://github.com/facebook/react/pull/15809
Best practices for building a large scale react application
While making a Single Page App with React, it is very easy for your code-base to become unorganized. There are many good libraries in the React ecosystem that can be used to manage certain aspects of the app, this article covers some of them in depth. Other than that, it lists some good practices to follow from the beginning of the project if you have scalability in mind
While making a Single Page App with React, it is very easy for your code-base to become unorganized. There are many good libraries in the React ecosystem that can be used to manage certain aspects of the app, this article covers some of them in depth. Other than that, it lists some good practices to follow from the beginning of the project if you have scalability in mind
React: Optimize Components with React.memo, useMemo, and useCallback
In most cases, React performance is not something you need to worry about. The core library does a ton of work under the hood to make sure everything is rendering efficiently. However, occasionally you can run into scenarios where your components are rendering more often than they need to and slowing your site down. This article looks at some solutions.
In most cases, React performance is not something you need to worry about. The core library does a ton of work under the hood to make sure everything is rendering efficiently. However, occasionally you can run into scenarios where your components are rendering more often than they need to and slowing your site down. This article looks at some solutions.
Four patterns for global state with React hooks: Context or Redux
Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? In this post, Daishi would like to show four patterns toward using Redux.
Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? In this post, Daishi would like to show four patterns toward using Redux.
Better Apps with React Server-Side Rendering
A post from the Riot Games tech blog about how they use React to make faster web apps.
A post from the Riot Games tech blog about how they use React to make faster web apps.
🐞 Experimental DevTools Updates
The new DevTools now show you exactly the reason why a component rerendered, including which prop changed and more.
https://github.com/bvaughn/react-devtools-experimental
The new DevTools now show you exactly the reason why a component rerendered, including which prop changed and more.
https://github.com/bvaughn/react-devtools-experimental
⛑ Remove Feature Flag to Disable Yielding
The feature flag added to disable yielding in Concurrent Mode was superset by the new Batched Mode.
https://github.com/facebook/react/pull/15654
The feature flag added to disable yielding in Concurrent Mode was superset by the new Batched Mode.
https://github.com/facebook/react/pull/15654
🎇 React Flare Updates
These changes have been made to the React Flare:
• Listen to Document.Body and Add stopPropagation to Press
• Move Press Root Event Removal to Click Phase
• Root Events Are Removed on contextmenu
https://github.com/facebook/react/issues/15257
These changes have been made to the React Flare:
• Listen to Document.Body and Add stopPropagation to Press
• Move Press Root Event Removal to Click Phase
• Root Events Are Removed on contextmenu
https://github.com/facebook/react/issues/15257
🎨 Use !important to Hide Suspended Nodes
To make sure suspended nodes are hidden even if custom CSS would overwrite it, it’s now using !important using style.setProperty.
https://github.com/facebook/react/pull/15861
To make sure suspended nodes are hidden even if custom CSS would overwrite it, it’s now using !important using style.setProperty.
https://github.com/facebook/react/pull/15861
🔄 React Fresh Updates
More work on React Fresh:
• Reset State on Edits to Initial State Arguments and More
• Make Transform Resilient to Plugin Order
More work on React Fresh:
• Reset State on Edits to Initial State Arguments and More
• Make Transform Resilient to Plugin Order
When to useMemo and useCallback
Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. In this post Kent breaks down those costs (and benefits) of useMemo and useCallback.
Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. In this post Kent breaks down those costs (and benefits) of useMemo and useCallback.
🎇 Rethinking Focus
In this GitHub issue, the team outlines a proposal that rethinks how focus is managed in React apps. Get involved!
https://github.com/facebook/react/issues/16009
In this GitHub issue, the team outlines a proposal that rethinks how focus is managed in React apps. Get involved!
https://github.com/facebook/react/issues/16009