💥 RFC: React.lazy()
To make it easier to code split individual components in React, the new
https://github.com/reactjs/rfcs/pull/64
To make it easier to code split individual components in React, the new
React.lazy() API adds first-class support by embracing dynamic imports.https://github.com/reactjs/rfcs/pull/64
GitHub
React.lazy() by gaearon · Pull Request #64 · reactjs/rfcs
View formatted RFC
Note: I just wrote up the RFC. The semantics are designed by @sebmarkbage and @acdlite.
Note: I just wrote up the RFC. The semantics are designed by @sebmarkbage and @acdlite.
🚀 RFC: Static contextType
The address some of the problems with render props for the new Context API, the Core team is working on
https://github.com/reactjs/rfcs/pull/65
The address some of the problems with render props for the new Context API, the Core team is working on
static contextType as a new consuming mechanism. You can also look at the [preliminary documentation PR](https://github.com/reactjs/reactjs.org/pull/1265).https://github.com/reactjs/rfcs/pull/65
GitHub
Document class contextType as the primary consuming mechanism by sebmarkbage · Pull Request #1265 · reactjs/reactjs.org
facebook/react#13728
This documents the Class.contextType API.
The intention here is to document this as the primary way to consume a Context from a class, and since classes are still the mainstrea...
This documents the Class.contextType API.
The intention here is to document this as the primary way to consume a Context from a class, and since classes are still the mainstrea...
⚡️ RFC: shouldComponentRemount
Alex Krolick ([alexkrolick](https://github.com/alexkrolick)) published an RFC for
https://github.com/reactjs/rfcs/pull/62
Alex Krolick ([alexkrolick](https://github.com/alexkrolick)) published an RFC for
shouldComponentRemount, a new lifecycle method to control when React mounts and unmounts a component.https://github.com/reactjs/rfcs/pull/62
GitHub
alexkrolick - Overview
alexkrolick has 126 repositories available. Follow their code on GitHub.
⏱ Rename Priority Levels
The Core team also made small changes to some of the API names for the scheduler - one of the building blocks of React’s upcoming concurrent mode. The API is not final and we can expect an RFC soon.
https://github.com/facebook/react/pull/13842
The Core team also made small changes to some of the API names for the scheduler - one of the building blocks of React’s upcoming concurrent mode. The API is not final and we can expect an RFC soon.
https://github.com/facebook/react/pull/13842
GitHub
[scheduler] Rename priority levels by acdlite · Pull Request #13842 · facebook/react
"Interactive" -> "User-blocking"
"Whenever" -> "Idle"
These are the terms used by @spanicker in their main-thread scheduling proposal: https://github....
"Whenever" -> "Idle"
These are the terms used by @spanicker in their main-thread scheduling proposal: https://github....
🕵️♀️ Deprecate findDOMNode in StrictMode
In an attempt to make React applications easier to maintain, the Core team considers deprecating
https://github.com/facebook/react/pull/13841
In an attempt to make React applications easier to maintain, the Core team considers deprecating
findDOMNode. The current API is breaking abstraction levels which leads to refactoring hazard.https://github.com/facebook/react/pull/13841
GitHub
Deprecate findDOMNode in StrictMode by sebmarkbage · Pull Request #13841 · facebook/react
Motivation
The main motivation is that findDOMNode is breaking abstraction levels but allowing a parent to reason about what kind of children a component might render. It creates a refactoring haza...
The main motivation is that findDOMNode is breaking abstraction levels but allowing a parent to reason about what kind of children a component might render. It creates a refactoring haza...
⏪ Revert: React.pure() Automatically Forwards Ref
Last week we were covering a PR that added
https://github.com/facebook/react/pull/13887
Last week we were covering a PR that added
forwardRef behavior to React.pure() by default. The PR was since reverted while the Core team is working on the future of ref forwarding.https://github.com/facebook/react/pull/13887
GitHub
Revert "React.pure automatically forwards ref" by sophiebits · Pull Request #13887 · facebook/react
Reverts #13822. We're not sure we want to do this.
🔥 RFC: React Hooks
The React team announced Hooks - A new and backwards-compatible Component API. In addition to the RFC, the team also launched [a complete set of documentation](https://reactjs.org/docs/hooks-intro.html). You can play around with React Hooks today by using the v16.7.0-alpha release on npm.
https://github.com/reactjs/rfcs/pull/68
The React team announced Hooks - A new and backwards-compatible Component API. In addition to the RFC, the team also launched [a complete set of documentation](https://reactjs.org/docs/hooks-intro.html). You can play around with React Hooks today by using the v16.7.0-alpha release on npm.
https://github.com/reactjs/rfcs/pull/68
legacy.reactjs.org
Introducing Hooks – React
A JavaScript library for building user interfaces
🎉 React v16.6.0: lazy, memo and contextType
This week also marks the release of the stable v16.6. This not only adds the lazy, memo, contextType, and getDerivedStateFromError APIs that we covered in previous issues, but is also the first public build where Suspense is no longer behind a feature flag and not marked unstable.
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
This week also marks the release of the stable v16.6. This not only adds the lazy, memo, contextType, and getDerivedStateFromError APIs that we covered in previous issues, but is also the first public build where Suspense is no longer behind a feature flag and not marked unstable.
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
legacy.reactjs.org
React v16.6.0: lazy, memo and contextType – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense…
⏱ Enable concurrent APIs flag for 16.7
Concurrent APIs (ReactDOM.createRoot and <ConcurrentMode/>) will no longer be unstable in the upcoming v16.7.0 release.
https://github.com/facebook/react/pull/13928
Concurrent APIs (ReactDOM.createRoot and <ConcurrentMode/>) will no longer be unstable in the upcoming v16.7.0 release.
https://github.com/facebook/react/pull/13928
GitHub
Enable stable concurrent APIs flag for 16.7 alpha by bvaughn · Pull Request #13928 · facebook/react
These APIs will no longer be "unstable" in the upcoming 16.7 release. Rename them behind a feature flag though, in case we need to publish a 16.6 minor release in the meanwhile.
➡️ React.pure() is now React.memo()
After discussions in the RFC that we covered last week, React.pure() is now called React.memo().
https://github.com/facebook/react/pull/13905
After discussions in the RFC that we covered last week, React.pure() is now called React.memo().
https://github.com/facebook/react/pull/13905
GitHub
pure -> memo by gaearon · Pull Request #13905 · facebook/react
Same as #13898, just re-done on top of master.
📚 Remove cache as argument to read in React Cache
The React Cache API is still unstable and will undergo more changes. The cache is now read from context and cache invalidation was removed entirely. You can try it out in the v2.0.0-alpha.0 release.
https://github.com/facebook/react/pull/13865
The React Cache API is still unstable and will undergo more changes. The cache is now read from context and cache invalidation was removed entirely. You can try it out in the v2.0.0-alpha.0 release.
https://github.com/facebook/react/pull/13865
GitHub
[react-cache] Remove `cache` as argument to `read` by acdlite · Pull Request #13865 · facebook/react
Updated is API is Resource.read(key) instead of Resource.read(cache, key).
The cache is read from context using readContext.
This also removes cache invalidation entirely (other than the default LR...
The cache is read from context using readContext.
This also removes cache invalidation entirely (other than the default LR...
🎣 Hooks Merged Into React Master
The implantation of the experimental Hooks proposal landed in React’s master branch this week. The PR contains valuable information on how hooks are implemented.
https://github.com/facebook/react/pull/13968
The implantation of the experimental Hooks proposal landed in React’s master branch this week. The PR contains valuable information on how hooks are implemented.
https://github.com/facebook/react/pull/13968
GitHub
Implement the experimental Hooks proposal behind a feature flag by sebmarkbage · Pull Request #13968 · facebook/react
Hooks let you use all React features (such as state and lifecycle) without writing a class.
Learn more about Hooks
Provide feedback on the Hooks RFC
We have presented the Hooks proposal at React ...
Learn more about Hooks
Provide feedback on the Hooks RFC
We have presented the Hooks proposal at React ...
🔁 Add Back Proper AsyncMode Symbol for Back Compat
Thanks to Jordan Harband (ljharb), the react-is package to test arbitrary values and see if they’re a particular React element type now correctly handles the meanwhile renamed AsyncMode component.
https://github.com/facebook/react/pull/13959
Thanks to Jordan Harband (ljharb), the react-is package to test arbitrary values and see if they’re a particular React element type now correctly handles the meanwhile renamed AsyncMode component.
https://github.com/facebook/react/pull/13959
GitHub
[react-is] add back proper AsyncMode symbol, for back compat by ljharb · Pull Request #13959 · facebook/react
Partial revert of #13732
Fixes #13958.
I didn't add tests for isAsyncMode because #13732 didn't preserve any - happy to add them if needed.
Fixes #13958.
I didn't add tests for isAsyncMode because #13732 didn't preserve any - happy to add them if needed.
⁉️ Don’t Lint Against Hooks After Conditional Throw
To make working with React Hooks easier, the Core team is working on a linter rule that helps to comply with the Rules of Hooks. This PR takes the custom linter one step forward.
https://github.com/facebook/react/pull/14040
To make working with React Hooks easier, the Core team is working on a linter rule that helps to comply with the Rules of Hooks. This PR takes the custom linter one step forward.
https://github.com/facebook/react/pull/14040
GitHub
Don't lint against Hooks after conditional throw by sophiebits · Pull Request #14040 · facebook/react
Seems like this should be OK. Fixes #14038.
Now when tracking paths, we completely ignore segments that end in a throw.
Now when tracking paths, we completely ignore segments that end in a throw.
⏳ Flip Expiration Times
In an effort to simplify the reconciler code, internal priority levels now have their values reversed.
https://github.com/facebook/react/pull/13912
In an effort to simplify the reconciler code, internal priority levels now have their values reversed.
https://github.com/facebook/react/pull/13912
GitHub
Flip expiration times by sophiebits · Pull Request #13912 · facebook/react
Now:
0 - NoWork
1 - Never
...
big - low pri things
even bigger - hi pri things
max 31-bit int - Sync
Per @sebmarkbage in #13904.
0 - NoWork
1 - Never
...
big - low pri things
even bigger - hi pri things
max 31-bit int - Sync
Per @sebmarkbage in #13904.
⏱ 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...