🔥 A new HOC API: pure()
Andrew (@acdlite) added pure(), a new HOC to bring PureComponent behavior to functional components.
https://github.com/facebook/react/pull/13748
Andrew (@acdlite) added pure(), a new HOC to bring PureComponent behavior to functional components.
https://github.com/facebook/react/pull/13748
GitHub
pure by acdlite · Pull Request #13748 · facebook/react
Note: the discussion for this proposal is in reactjs/rfcs#63. It has since been renamed to React.memo().
A higher-order component version of the React.PureComponent class. During an update, the pre...
A higher-order component version of the React.PureComponent class. During an update, the pre...
📚 Easier Access to Context from Class Components
Brian (@brian_d_vaughn) added an API that adds this.context in all callbacks of class components and simplifies migration to the new context.
https://github.com/facebook/react/pull/13728
Brian (@brian_d_vaughn) added an API that adds this.context in all callbacks of class components and simplifies migration to the new context.
https://github.com/facebook/react/pull/13728
GitHub
Support class component static contextType attribute by bvaughn · Pull Request #13728 · facebook/react
Note: the discussion for this proposal is in reactjs/rfcs#65.
The main motivation is that continuing to support legacy context makes React slower and larger, and we'd like to be able to help ev...
The main motivation is that continuing to support legacy context makes React slower and larger, and we'd like to be able to help ev...
👀 Async React Is Now Concurrent React
After previous tweets by the React Core team, Dominic (@trueadm) now landed a commit that renames AsyncMode to ConcurrentMode.
https://github.com/facebook/react/pull/13732
After previous tweets by the React Core team, Dominic (@trueadm) now landed a commit that renames AsyncMode to ConcurrentMode.
https://github.com/facebook/react/pull/13732
GitHub
Rename AsyncMode -> ConcurrentMode by trueadm · Pull Request #13732 · facebook/react
This PR renames AsyncMode to ConcurrentMode. Specifically:
React exports unstable_ConcurrentMode now rather than unstable_AsyncMode.
ReactTestRender now takes unstable_isConcurrent as an option ra...
React exports unstable_ConcurrentMode now rather than unstable_AsyncMode.
ReactTestRender now takes unstable_isConcurrent as an option ra...
⚡️ Context vs. React Redux
Alex Reardon (@alexandereardon) started an interesting discussion about comparing the performance of react-redux to a single, shared React Context. Dig in for insights into the different models and their restrictions.
https://github.com/facebook/react/issues/13739
Alex Reardon (@alexandereardon) started an interesting discussion about comparing the performance of react-redux to a single, shared React Context. Dig in for insights into the different models and their restrictions.
https://github.com/facebook/react/issues/13739
GitHub
React Context value propagation performance · Issue #13739 · facebook/react
Hi there! I have observed a performance issue with context providers and value updates. I have spoken with @gaearon with this on twitter, so he will have a bit more context Let's say you ha...
⏳ Adding Priority Levels to the Scheduler
Andrew (@acdlite) also added an API for modifying priority levels to the scheduler. This makes it possible to enqueue high priority state changes that should be flushed earlier.
Expect an RFC soon to finalize the names.
https://github.com/facebook/react/pull/13720
Andrew (@acdlite) also added an API for modifying priority levels to the scheduler. This makes it possible to enqueue high priority state changes that should be flushed earlier.
Expect an RFC soon to finalize the names.
https://github.com/facebook/react/pull/13720
GitHub
[scheduler] Priority levels, continuations, and wrapped callbacks by acdlite · Pull Request #13720 · facebook/react
All of these features are based on features of React's internal scheduler. The eventual goal is to lift as much as possible out of the React internals into the Scheduler package.
Includes s...
Includes s...
🎟 Prevent React from Overwriting window.event
Sergei Startsev (sergei-startsev) worked on a fix to prevent React from overwriting window.event in event callbacks when using a development build. The PR is also a great example of the throughout manual testing we do for React DOM.
https://github.com/facebook/react/pull/13697
Sergei Startsev (sergei-startsev) worked on a fix to prevent React from overwriting window.event in event callbacks when using a development build. The PR is also a great example of the throughout manual testing we do for React DOM.
https://github.com/facebook/react/pull/13697
GitHub
Restore global window.event after event dispatching (#13688) by sergei-startsev · Pull Request #13697 · facebook/react
Used @ConradIrwin suggestion to fix #13688.
🔭 DOM Event Mount Target Considerations
React is currently listening to DOM events on the document level. If you’re curious about potential alternatives which we’re considering as part of React Fire, check out my write-up about this topic.
https://github.com/facebook/react/issues/13713
React is currently listening to DOM events on the document level. If you’re curious about potential alternatives which we’re considering as part of React Fire, check out my write-up about this topic.
https://github.com/facebook/react/issues/13713
GitHub
DOM Event Mount Target Considerations · Issue #13713 · facebook/react
Given that we’re considering a rewrite of the event system and are thinking about attaching events to the React root, I thought it would be fitting to explore all our options on where to mount the ...
💥 Enable getDerivedStateFromError
This new lifecycle method that is invoked after an error has been thrown by a descendant component. With that, you directly update a component’s state based on the error. Learn more in the open documentation PR.
https://github.com/facebook/react/pull/13746
This new lifecycle method that is invoked after an error has been thrown by a descendant component. With that, you directly update a component’s state based on the error. Learn more in the open documentation PR.
https://github.com/facebook/react/pull/13746
GitHub
Enable getDerivedStateFromError by bvaughn · Pull Request #13746 · facebook/react
Commits are split up for easier review:
4ed84b0: Remove the enableGetDerivedStateFromCatch feature flag.
cd49672: Copy-paste ReactErrorBoundaries to ReactLegacyErrorBoundaries to preserve tests ...
4ed84b0: Remove the enableGetDerivedStateFromCatch feature flag.
cd49672: Copy-paste ReactErrorBoundaries to ReactLegacyErrorBoundaries to preserve tests ...
🎉 Create React App 2.0
This week, Create React App 2.0 was released bringing a year’s worth of improvements with it. Most notably support for SASS and Babel 7.
https://github.com/reactjs/reactjs.org/pull/1215
This week, Create React App 2.0 was released bringing a year’s worth of improvements with it. Most notably support for SASS and Babel 7.
https://github.com/reactjs/reactjs.org/pull/1215
GitHub
Create React App v2 Blog Post by Timer · Pull Request #1215 · reactjs/reactjs.org
Adds a blog post summarizing the changes and improvements made in Create React App v2.
👀 React Conf Speaker Update
React Conf 2018 is only three weeks ahead. This week, the final list of speakers was released! If you don’t have the chance to attend, join me in watching the live stream.
https://conf.reactjs.org/speakers.html
React Conf 2018 is only three weeks ahead. This week, the final list of speakers was released! If you don’t have the chance to attend, join me in watching the live stream.
https://conf.reactjs.org/speakers.html
conf.reactjs.org
Speakers / React Conf 2019
This year's conference features fresh faces and experienced presenters.
🃏 A Jest Helper for Concurrent Tests
The React team discovered a couple of repeating patterns while improving test harness of concurrent React. To make it easier for you, test helpers will be made public as the jest-react package.
https://github.com/facebook/react/pull/13751
The React team discovered a couple of repeating patterns while improving test harness of concurrent React. To make it easier for you, test helpers will be made public as the jest-react package.
https://github.com/facebook/react/pull/13751
GitHub
Jest + test renderer helpers for concurrent mode by acdlite · Pull Request #13751 · facebook/react
Most of our concurrent React tests use the noop renderer. But most of those tests don't test the renderer API, and could instead be written with the test renderer. We should switch to using the...
📝 Making React Docs Even Better
Special shout-out to Dustin Schau (DSchau) for landing multiple commits that are improving the official React documentation. A great documentation is vital to us and we are more than happy for the help.
https://github.com/reactjs/reactjs.org/commits?author=DSchau
Special shout-out to Dustin Schau (DSchau) for landing multiple commits that are improving the official React documentation. A great documentation is vital to us and we are more than happy for the help.
https://github.com/reactjs/reactjs.org/commits?author=DSchau
GitHub
Commits · reactjs/react.dev
The React documentation website. Contribute to reactjs/react.dev development by creating an account on GitHub.
🤙 Functional → Function Component
Earlier this year Kyle Simpson (getify) started to raise concerns about the terminology used for functional components. To avoid further confusion, we’ll refer to them as function components from now on.
https://github.com/reactjs/reactjs.org/pull/863
Earlier this year Kyle Simpson (getify) started to raise concerns about the terminology used for functional components. To avoid further confusion, we’ll refer to them as function components from now on.
https://github.com/reactjs/reactjs.org/pull/863
GitHub
Rename "functional component" to "function component" by gaearon · Pull Request #863 · reactjs/reactjs.org
Related to discussion in https://mobile.twitter.com/getify/status/993127777057550336
Yay or nay?
Yay or nay?
📚 React Cache
We’re soon able to release the simple-cache-provider API as react-cache. Thanks to Marzio Superina (msuperina) for handing over the npm package. This API will be helpful when working with React Suspense.
https://github.com/facebook/react/pull/13755
We’re soon able to release the simple-cache-provider API as react-cache. Thanks to Marzio Superina (msuperina) for handing over the npm package. This API will be helpful when working with React Suspense.
https://github.com/facebook/react/pull/13755
GitHub
Rename simple-cache-provider to react-cache by acdlite · Pull Request #13755 · facebook/react
Thanks @msuperina for letting us have the name!
🎉 Enable Suspense
Suspense is no longer behind a feature flag and will likely be part of the next release. Additional changes also include updated API names.
https://github.com/facebook/react/pull/13799
Suspense is no longer behind a feature flag and will likely be part of the next release. Additional changes also include updated API names.
https://github.com/facebook/react/pull/13799
GitHub
Enable Suspense + rename Placeholder by gaearon · Pull Request #13799 · facebook/react
Removes client Suspense feature flag, it's now always on.
Renames now-exposed to .
Updates the fixture.
No whitespace:...
Renames now-exposed to .
Updates the fixture.
No whitespace:...
➡️ React.pure() Automatically Forwards Ref
React.pure(), a new HOC to enable PureComponent behavior on function components that was recently merged, now comes with forwardRef support built-in.
https://github.com/facebook/react/pull/13822
React.pure(), a new HOC to enable PureComponent behavior on function components that was recently merged, now comes with forwardRef support built-in.
https://github.com/facebook/react/pull/13822
GitHub
React.pure automatically forwards ref by sophiebits · Pull Request #13822 · facebook/react
We're not planning to encourage legacy context, and without this change, it's difficult to use pure+forwardRef together. We could special-case pure(forwardRef(...)) but this is hopefully si...
📱 Don’t Add onclick Listener to React Root
Thanks to an excellent bug report by Alexey Mikitevich (amikitevich) we were made aware of a recent regression in React DOM. If you’re into iOS Safari touch oddities, the bugfix PR is an interesting read.
https://github.com/facebook/react/pull/13778
Thanks to an excellent bug report by Alexey Mikitevich (amikitevich) we were made aware of a recent regression in React DOM. If you’re into iOS Safari touch oddities, the bugfix PR is an interesting read.
https://github.com/facebook/react/pull/13778
GitHub
Don’t add onclick listener to React root by philipp-spiess · Pull Request #13778 · facebook/react
Fixes #13777
As part of #11927 we introduced a regression by adding onclick handler to the React root. This causes the whole React tree to flash when tapped on iOS devices (for reasons I outlined i...
As part of #11927 we introduced a regression by adding onclick handler to the React root. This causes the whole React tree to flash when tapped on iOS devices (for reasons I outlined i...
⏱ Eagerly Schedule rAF at Beginning of Frame
The core team is working on perfecting the scheduler - one of the building blocks of React’s upcoming concurrent mode. It’s fascinating to see how the Scheduler improves over time.
https://github.com/facebook/react/pull/13785
The core team is working on perfecting the scheduler - one of the building blocks of React’s upcoming concurrent mode. It’s fascinating to see how the Scheduler improves over time.
https://github.com/facebook/react/pull/13785
GitHub
[scheduler] Eagerly schedule rAF at beginning of frame by acdlite · Pull Request #13785 · facebook/react
Eagerly schedule the next animation callback at the beginning of the frame. If the scheduler queue is not empty at the end of the frame, it will continue flushing inside that callback. If the queue...