⏱ Deadline Object ➡ shouldYield
Instead of using a requestIdleCallback-style deadline object, the Scheduler now expose a shouldYield method that returns true if there’s a higher priority event in the queue.
https://github.com/facebook/react/pull/14025
Instead of using a requestIdleCallback-style deadline object, the Scheduler now expose a shouldYield method that returns true if there’s a higher priority event in the queue.
https://github.com/facebook/react/pull/14025
GitHub
[scheduler] Deadline object -> shouldYield by acdlite · Pull Request #14025 · facebook/react
Instead of using a requestIdleCallback-style deadline object, expose a method Scheduler.shouldYield that returns true if there's a higher priority event in the queue.
🐞 Debug Tools Package for Introspection of Hooks
To make it easier to debug React Hooks, the team added a new experimental package for debugging React renderers.
https://github.com/facebook/react/pull/14085
To make it easier to debug React Hooks, the team added a new experimental package for debugging React renderers.
https://github.com/facebook/react/pull/14085
GitHub
Add Debug Tools Package for Introspection of Hooks by sebmarkbage · Pull Request #14085 · facebook/react
Adds introspection of primitive and custom hooks in a single function component. If you feed it a standalone component it just gives you the initial/default values as the current value of each prim...
🧠 A Metaphor for Concurrent React
Dan wrote an excellent metaphor for the upcoming concurrent mode in React. Check out his Twitter thread if you’re curious about the mental model behind this upcoming feature.
https://twitter.com/dan_abramov/status/1059059596835340288
Dan wrote an excellent metaphor for the upcoming concurrent mode in React. Check out his Twitter thread if you’re curious about the mental model behind this upcoming feature.
https://twitter.com/dan_abramov/status/1059059596835340288
Twitter
Dan Abramov
So I have a metaphor for how Concurrent React works which I think might help you get a mental model (we’ll need to include something like this in the docs).
🤞 Avoid Double Commit by Re-rendering Immediately
To fix issues when using Suspense in non-concurrent mode, we now render the suspended and the fallback children within a single commit. Andrew also posted a great summary of the PR.
https://github.com/facebook/react/pull/14083
To fix issues when using Suspense in non-concurrent mode, we now render the suspended and the fallback children within a single commit. Andrew also posted a great summary of the PR.
https://github.com/facebook/react/pull/14083
GitHub
[suspense] Avoid double commit by re-rendering immediately and reusing primary children by acdlite · Pull Request #14083 · facebook/react
To support Suspense outside of concurrent mode, any component that starts rendering must commit synchronously without being interrupted. This means the normal path, where we unwind the stack and tr...
🗄 Suspense Fuzz Tester
A new fuzz tester was added to improve the reliability of suspense. It works by generating random trees of React elements, with some elements that suspend and some that don’t.
https://github.com/facebook/react/pull/14147
A new fuzz tester was added to improve the reliability of suspense. It works by generating random trees of React elements, with some elements that suspend and some that don’t.
https://github.com/facebook/react/pull/14147
GitHub
Suspense fuzz tester by acdlite · Pull Request #14147 · facebook/react
The fuzzer works by generating a random tree of React elements. The tree two types of custom components:
A Text component suspends rendering on initial mount for a fuzzy duration of time. It may u...
A Text component suspends rendering on initial mount for a fuzzy duration of time. It may u...
⏳ Add a Low Priority to the Scheduler
Nathan Schloss (n8schloss) made a PR to add another priority level to the experimental Scheduler package. This new priority will still resolve but only after everything else. This is useful for logging or sending data back to the server.
https://github.com/facebook/react/pull/14155
Nathan Schloss (n8schloss) made a PR to add another priority level to the experimental Scheduler package. This new priority will still resolve but only after everything else. This is useful for logging or sending data back to the server.
https://github.com/facebook/react/pull/14155
GitHub
Add a low priority to the scheduler that still resolves by n8schloss · Pull Request #14155 · facebook/react
Normal priority is for things that we still want the user to see and idle pri is for things that are more speculative and may never resolve. We do not currently have a priority for things (like log...
🦄 Unify Hooks’ Second Argument Comparison
Thanks to Mateusz Burzyński (Andarist) we now also have development warnings in the server renderer implementation for the second argument comparison implementation of hooks.
https://github.com/facebook/react/pull/14036
Thanks to Mateusz Burzyński (Andarist) we now also have development warnings in the server renderer implementation for the second argument comparison implementation of hooks.
https://github.com/facebook/react/pull/14036
GitHub
Rename inputsAreEqual to areHookInputsEqual & move it to shared by Andarist · Pull Request #14036 · facebook/react
I know its bikeshedding but the name of this function triggered my OCD a little bit because it sounds (to me) like a name for a boolean variable. Most commonly other functions with similar purpose ...
✨ Warn for Bad useEffect Return Value
The cleanup function for the useEffect hook must always be returned synchronously, something that’s not possible to do when an async function is used. We now warn in such cases.
https://github.com/facebook/react/pull/14069
The cleanup function for the useEffect hook must always be returned synchronously, something that’s not possible to do when an async function is used. We now warn in such cases.
https://github.com/facebook/react/pull/14069
GitHub
Warn for bad useEffect return value by sophiebits · Pull Request #14069 · facebook/react
Mostly to catch this:
useEffect(async () => {
// ...
return cleanup;
});
Is this too restrictive? Not sure if you would want to do like
useEffect(() => ref.current.style.color = &...
useEffect(async () => {
// ...
return cleanup;
});
Is this too restrictive? Not sure if you would want to do like
useEffect(() => ref.current.style.color = &...
🌁 Fix Crash During Server Render in React 16.6
React can be loaded into many JavaScript runtimes. Thanks to Tiago Nunes (tnunes), it can now again be loaded into environments without setTimeout (e.g. ClearScript for .NET).
https://github.com/facebook/react/pull/14103
React can be loaded into many JavaScript runtimes. Thanks to Tiago Nunes (tnunes), it can now again be loaded into environments without setTimeout (e.g. ClearScript for .NET).
https://github.com/facebook/react/pull/14103
GitHub
Fix crash during server render in React 16.6.0 by tnunes · Pull Request #14103 · facebook/react
This fixes a bug introduced in React 16.6.0, which was not present in 16.5.2.
Runtimes without setTimeout and clearTimeout (e.g. ClearScript for .NET) are now crashing just by importing react-dom.
...
Runtimes without setTimeout and clearTimeout (e.g. ClearScript for .NET) are now crashing just by importing react-dom.
...
🛠 Support React.memo and Timed-out Suspense Trees in Dev Tools
The official React Developer Tools browser extension was updated to support some of the newly released React features.
https://github.com/facebook/react-devtools/pull/1207
The official React Developer Tools browser extension was updated to support some of the newly released React features.
https://github.com/facebook/react-devtools/pull/1207
GitHub
Support React.memo and timed-out Suspense trees by bvaughn · Pull Request #1207 · facebook/react-devtools
Support React.memo
Resolves #1193
Commit 4d85b12
Remove React.pure (since it was never released in a stable) and add support for React.memo. Preserve previous custom displayName semantics.
Code
f...
Resolves #1193
Commit 4d85b12
Remove React.pure (since it was never released in a stable) and add support for React.memo. Preserve previous custom displayName semantics.
Code
f...
🎉 React 16.6.1 Patch Release
The latest patch release brings multiple bug fixes related to the recently released Suspense features. We can also expect a new alpha release soon.
https://github.com/facebook/react/releases/tag/v16.6.1
The latest patch release brings multiple bug fixes related to the recently released Suspense features. We can also expect a new alpha release soon.
https://github.com/facebook/react/releases/tag/v16.6.1
GitHub
facebook/react
A declarative, efficient, and flexible JavaScript library for building user interfaces. - facebook/react
🎣 Update on the Hooks RFC Feedback
Over the past weeks, many questions about the Hooks proposal were raised. Sebastian now posted an extensive answer to all of the concerns.
https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884
Over the past weeks, many questions about the Hooks proposal were raised. Sebastian now posted an extensive answer to all of the concerns.
https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884
GitHub
RFC: React Hooks by sebmarkbage · Pull Request #68 · reactjs/rfcs
In this RFC, we propose introducing Hooks to React. See the RFC and the documentation for more details.
https://reactjs.org/docs/hooks-overview.html
View formatted RFC
(The talk video has now been ...
https://reactjs.org/docs/hooks-overview.html
View formatted RFC
(The talk video has now been ...
📍 RFC: Marker Hook for Server-side Data
Leops (l3ops) published a proposal to allow extraction of server-side data and subsequent client-side hydration along the component tree.
https://github.com/reactjs/rfcs/pull/85
Leops (l3ops) published a proposal to allow extraction of server-side data and subsequent client-side hydration along the component tree.
https://github.com/reactjs/rfcs/pull/85
GitHub
RFC: Marker hook for server-side data by leops · Pull Request #85 · reactjs/rfcs
View rendered
This RFC proposes a useSerializable hook to automate the extraction, and subsequent hydration of serializable server-side data.
This RFC proposes a useSerializable hook to automate the extraction, and subsequent hydration of serializable server-side data.
💅 CSS Shorthand Property Warning
React soon warns when overlapping styles (e.g. border and borderBottom) change to avoid a common issues that users of React DOM run into.
https://github.com/facebook/react/pull/14183
React soon warns when overlapping styles (e.g. border and borderBottom) change to avoid a common issues that users of React DOM run into.
https://github.com/facebook/react/pull/14183
GitHub
Simplify CSS shorthand property warning by sophiebits · Pull Request #14183 · facebook/react
I figured out a simpler way to do #14181. It does allocate some but I think that's OK. Time complexity might even be better since we avoid the nested loops the old one had.
⚠️ Remove Relay Classic Plugin from Dev Tools
Thanks to a contribution from Avi Johnson (avijohnson), the deprecated relay classic plugin will no longer be part of future Dev Tools build. This removes complexity and makes the extension smaller.
https://github.com/facebook/react-devtools/pull/1224
Thanks to a contribution from Avi Johnson (avijohnson), the deprecated relay classic plugin will no longer be part of future Dev Tools build. This removes complexity and makes the extension smaller.
https://github.com/facebook/react-devtools/pull/1224
GitHub
Remove Relay classic plugin and any reference to Relay by avijohnson · Pull Request #1224 · facebook/react-devtools
With the deprecation, of Relay Classic it no longer makes sense to maintain this plugin.
cc @bvaughn
[Testing]
I follow the existing instructions for test in Chrome, Firefox and standalone, making ...
cc @bvaughn
[Testing]
I follow the existing instructions for test in Chrome, Firefox and standalone, making ...
🔎 Properly Display Hidden, Suspended Subtrees in Dev Tools
The new Profiler inside React Dev Tools now properly displays hidden, suspended subtrees.
https://github.com/facebook/react-devtools/pull/1219
The new Profiler inside React Dev Tools now properly displays hidden, suspended subtrees.
https://github.com/facebook/react-devtools/pull/1219
GitHub
Profiler should properly display hidden, suspended subtrees by bvaughn · Pull Request #1219 · facebook/react-devtools
The behavior of timed-out Suspense trees is unique. Rather than unmount the timed out content (and possibly lose important state) React re-parents this content within a hidden Fragment while the fa...
👷♀️ Allow Production Builds in DOM Fixture
In a contribution from Jan Pöschko (poeschko), the React DOM fixture app used for manually testing multiple React DOM features, now has an option to also test production builds.
https://github.com/facebook/react/pull/13786
In a contribution from Jan Pöschko (poeschko), the React DOM fixture app used for manually testing multiple React DOM features, now has an option to also test production builds.
https://github.com/facebook/react/pull/13786
GitHub
Add a checkbox to fixtures UI to choose React production build by poeschko · Pull Request #13786 · facebook/react
This started out as a part of #13613 which will probably be closed.
🗄 Unique Thread ID for Each Partial Render to Access Contexts
To fix an issue where concurrent partial renders can have an effect on each other, a new unique thread ID is used to access contexts.
https://github.com/facebook/react/pull/14182
To fix an issue where concurrent partial renders can have an effect on each other, a new unique thread ID is used to access contexts.
https://github.com/facebook/react/pull/14182
GitHub
Use unique thread ID for each partial render to access Context by sebmarkbage · Pull Request #14182 · facebook/react
Fixes #13874
Alternative to #13877
This first adds an allocator that keeps track of a unique ThreadID index for each currently executing partial renderer. IDs are not just growing but are reused as...
Alternative to #13877
This first adds an allocator that keeps track of a unique ThreadID index for each currently executing partial renderer. IDs are not just growing but are reused as...
⏳ Scheduler: Use MessageChannel instead of window
The previous implementation of the Scheduler used window.postMessage(). Since this will trigger all message listeners which can impact performance, we’re now using a unique MessageChannel instead.
https://github.com/facebook/react/pull/14234
The previous implementation of the Scheduler used window.postMessage(). Since this will trigger all message listeners which can impact performance, we’re now using a unique MessageChannel instead.
https://github.com/facebook/react/pull/14234
GitHub
[scheduler] Post to MessageChannel instead of window by acdlite · Pull Request #14234 · facebook/react
Scheduler needs to schedule a task that fires after paint. To do this, it currently posts a message event to window. This happens on every frame until the queue is empty. An unfortunate consequence...
⚛️ React Conf Recap
A new blog post is out that summarizes everything that happened during React Conf 2018.
https://reactjs.org/blog/2018/11/13/react-conf-recap.html
A new blog post is out that summarizes everything that happened during React Conf 2018.
https://reactjs.org/blog/2018/11/13/react-conf-recap.html
legacy.reactjs.org
React Conf recap: Hooks, Suspense, and Concurrent Rendering – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering. Sophie Alpert and…
🎉 React 16.6.3 Patch Release
After a somewhat broken 16.6.2 release, 16.6.3 is out with fixes multiple fixes for Suspense and other new React features.
https://github.com/facebook/react/releases/tag/v16.6.3
After a somewhat broken 16.6.2 release, 16.6.3 is out with fixes multiple fixes for Suspense and other new React features.
https://github.com/facebook/react/releases/tag/v16.6.3
GitHub
Release v16.6.3 · facebook/react
16.6.3 (November 12, 2018)
React DOM
Fix bugs in Suspense and lazy. (@acdlite in #14133, #14157, and #14164)
Fix highlighting of React.memo updates in React DevTools. (@bvaughn in #14141)
Fix inte...
React DOM
Fix bugs in Suspense and lazy. (@acdlite in #14133, #14157, and #14164)
Fix highlighting of React.memo updates in React DevTools. (@bvaughn in #14141)
Fix inte...