🎇 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
🎬 SuspenseList
A new
https://github.com/facebook/react/pull/15902
A new
<SuspenseList> component can be used to coordinate the loading sequence of nested suspense boundaries. It includes backwards and forwards options and the ability to expire rendering of the tail after a timeout.https://github.com/facebook/react/pull/15902
⏱ Scheduler: Delay Option
A new option was added to the scheduler API to allow callbacks to only run after a specific delay has passed.
https://github.com/facebook/react/pull/15911
A new option was added to the scheduler API to allow callbacks to only run after a specific delay has passed.
https://github.com/facebook/react/pull/15911
⚛️🛠 Experimental DevTools: Owner Tree
Check out this Twitter thread by Brian to learn more about the Owner Tree view coming to the new DevTools. The team is also working on React Native support.
https://twitter.com/brian_d_vaughn/status/1144262284912582657
Check out this Twitter thread by Brian to learn more about the Owner Tree view coming to the new DevTools. The team is also working on React Native support.
https://twitter.com/brian_d_vaughn/status/1144262284912582657
⏲ Scheduler: Use
isInputPending(), a new API to check if the browser has events enqueued, is now used inside the Scheduler behind a feature flag.
https://github.com/facebook/react/pull/15911
isInputPending()isInputPending(), a new API to check if the browser has events enqueued, is now used inside the Scheduler behind a feature flag.
https://github.com/facebook/react/pull/15911
🧪 Warn If Passive Effects Get Queued Outside of
With this change, React will now warn when effects are queued outside of an
https://github.com/facebook/react/pull/15763
act()With this change, React will now warn when effects are queued outside of an
act() call.https://github.com/facebook/react/pull/15763
⏰ Scheduler:
The
https://github.com/facebook/react/pull/15960
requestPaint()The
requestPaint() API is used by React to signalize the Scheduler that it needs to yield to let the browser paint the page. This is necessary since the new use of isInputPending() would otherwise cause the Scheduler to run more low-priority work.https://github.com/facebook/react/pull/15960
🧽 Construct Error at Invariant Call Site
Invariant Errors are now constructed directly at call site to remove one level of the call stack.
https://github.com/facebook/react/pull/15877
Invariant Errors are now constructed directly at call site to remove one level of the call stack.
https://github.com/facebook/react/pull/15877
🔎 Support for ESLint 6.0.0
Thanks to a contribution by Thomas Broyer, the ESLint plugin now works with 6.0.0
https://github.com/facebook/react/pull/15974
Thanks to a contribution by Thomas Broyer, the ESLint plugin now works with 6.0.0
https://github.com/facebook/react/pull/15974
🐌 Slightly Improve Performance of Hydration
By avoiding loading a property from the same node multiple times in a row, hydration is now a little bit faster.
https://github.com/facebook/react/pull/15998
By avoiding loading a property from the same node multiple times in a row, hydration is now a little bit faster.
https://github.com/facebook/react/pull/15998
🙅♀️ Fix Error Logging in
This PR fixes a bug in
https://github.com/facebook/react/pull/15797
getDerivedStateFromPropsThis PR fixes a bug in
getDerivedStateFromError where errors are not logged when an error occurs.https://github.com/facebook/react/pull/15797
🎇 React Flare Updates
These changes (and more) have been made to React Flare:
• React Native Fabric Support.
• useEvent() and responder specific hooks were added.
• Event targets were removed.
These changes (and more) have been made to React Flare:
• React Native Fabric Support.
• useEvent() and responder specific hooks were added.
• Event targets were removed.
🔄 React Fresh Updates
• Track Mounted Roots via DevTools Hook.
• The babel plugin now throws when applied in production.
• Require-like calls are no longer considered to be HOCs.
• Track Mounted Roots via DevTools Hook.
• The babel plugin now throws when applied in production.
• Require-like calls are no longer considered to be HOCs.
Announcing styled-components v5: Beast Mode
50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes!
50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes!
Add useEvent hook implementation
This PR adds a new primitive hook to React called useEvent. For now it's behind the React Flare flag and is labelled unstabled_useEvent on the React object. This implementation might have bugs in, as it's not been hooked up and tested with the various event responder modules, like Press, Hover etc. This isn't intended to be a bug-free PR, more it's an initial implementation that should aim to get the wiring right between fibers and the hook.
This PR adds a new primitive hook to React called useEvent. For now it's behind the React Flare flag and is labelled unstabled_useEvent on the React object. This implementation might have bugs in, as it's not been hooked up and tested with the various event responder modules, like Press, Hover etc. This isn't intended to be a bug-free PR, more it's an initial implementation that should aim to get the wiring right between fibers and the hook.
Redux Now Has Hooks. A Before and After Comparison
react-redux now includes some Hooks. This post walks through what those new Hooks are and how they may be helpful.
react-redux now includes some Hooks. This post walks through what those new Hooks are and how they may be helpful.
Why I'm using react-testing-library instead of Enzyme
When Hooks came out, Antoine started exploring other testing solutions in the React ecosystem. This is a write-up of his journey.
When Hooks came out, Antoine started exploring other testing solutions in the React ecosystem. This is a write-up of his journey.
The Complete Guide to React Refs
In this post, you will learn how to properly use refs, how to use the current API, and decide when to approach one over the other.
In this post, you will learn how to properly use refs, how to use the current API, and decide when to approach one over the other.
Buffet.js - React component library based on styled-components
The purpose of Buffet.js - an all-you-can-eat component library - is to give to the community a faster, easier and better way to develop both their private and public plugins and also, to allow us to set up a stronger design system which can be easily updated.
The purpose of Buffet.js - an all-you-can-eat component library - is to give to the community a faster, easier and better way to develop both their private and public plugins and also, to allow us to set up a stronger design system which can be easily updated.
react-conflux
Conflux is a modularized state management system utilizing the Context API and React Hooks for the React ecosystem. It provides predictable and optionally-nested state containers for applications in an elegant, streamlined, and developer-friendly manner.
Conflux is a modularized state management system utilizing the Context API and React Hooks for the React ecosystem. It provides predictable and optionally-nested state containers for applications in an elegant, streamlined, and developer-friendly manner.
effector
Effector lets you write simple, fast and type safe code and manage reactive state with ease.
Benefits:
- statically typed
- multi-store
- less boilerplate by design
- computed values
- no need for memoization
- side-effect management
- framework agnostic
- observable interoperability
- relatively small size
Effector lets you write simple, fast and type safe code and manage reactive state with ease.
Benefits:
- statically typed
- multi-store
- less boilerplate by design
- computed values
- no need for memoization
- side-effect management
- framework agnostic
- observable interoperability
- relatively small size