Remove usages of async-unsafe lifecycle methods

Author: Hypnosphi

docs/api.md

@@ -377,7 +377,7 @@ It does not modify the component class passed to it; instead, it *returns* a new
 
   * [`renderCountProp`] *(String)*: if defined, a property named this value will be added to the props passed to the wrapped component. Its value will be the number of times the component has been rendered, which can be useful for tracking down unnecessary re-renders. Default value: `undefined`
 
-  * [`shouldHandleStateChanges`] *(Boolean)*: controls whether the connector component subscribes to redux store state changes. If set to false, it will only re-render on `componentWillReceiveProps`. Default value:  `true`
+  * [`shouldHandleStateChanges`] *(Boolean)*: controls whether the connector component subscribes to redux store state changes. If set to false, it will only re-render when parent component re-renders. Default value:  `true`
 
   * [`storeKey`] *(String)*: the key of props/context to get the store. You probably only need this if you are in the inadvisable position of having multiple stores. Default value: `'store'`
 

src/components/Provider.js

@@ -38,8 +38,8 @@ export function createProvider(storeKey = 'store', subKey) {
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      Provider.prototype.componentWillReceiveProps = function (nextProps) {
-        if (this[storeKey] !== nextProps.store) {
+      Provider.prototype.componentDidUpdate = function () {
+        if (this[storeKey] !== this.props.store) {
           warnAboutReceivingStore()
         }
       }

src/components/connectAdvanced.js

@@ -156,11 +156,10 @@ export default function connectAdvanced(
         if (this.selector.shouldComponentUpdate) this.forceUpdate()
       }
 
-      componentWillReceiveProps(nextProps) {
-        this.selector.run(nextProps)
-      }
-
-      shouldComponentUpdate() {
+      shouldComponentUpdate(nextProps) {
+        if (nextProps !== this.props) {
+          this.selector.run(nextProps)
+        }
         return this.selector.shouldComponentUpdate
       }
 
@@ -248,6 +247,10 @@ export default function connectAdvanced(
 
       render() {
         const selector = this.selector
+
+        // Handle forceUpdate
+        if (!selector.shouldComponentUpdate) selector.run(this.props)
+
         selector.shouldComponentUpdate = false
 
         if (selector.error) {
@@ -265,7 +268,7 @@ export default function connectAdvanced(
     Connect.propTypes = contextTypes
 
     if (process.env.NODE_ENV !== 'production') {
-      Connect.prototype.componentWillUpdate = function componentWillUpdate() {
+      Connect.prototype.componentDidUpdate = function componentDidUpdate() {
         // We are hot reloading!
         if (this.version !== version) {
           this.version = version
@@ -287,6 +290,8 @@ export default function connectAdvanced(
             this.subscription.trySubscribe()
             oldListeners.forEach(listener => this.subscription.listeners.subscribe(listener))
           }
+
+          if (this.selector.shouldComponentUpdate) this.setState(dummyState)
         }
       }
     }

test/components/Provider.spec.js

@@ -220,4 +220,19 @@ describe('React', () => {
     store.dispatch({ type: 'APPEND', body: 'd' })
     expect(childMapStateInvokes).toBe(4)
   })
+
+  it('works in <StrictMode> without warnings', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
+    const store = createStore(() => ({}))
+
+    TestRenderer.create(
+      <React.StrictMode>
+        <Provider store={store}>
+          <div />
+        </Provider>
+      </React.StrictMode>
+    )
+
+    expect(spy).not.toHaveBeenCalled()
+  })
 })

test/components/connect.spec.js

@@ -200,7 +200,7 @@ describe('React', () => {
 
       @connect(state => ({ string: state }) )
       class Container extends Component {
-        componentWillMount() {
+        componentDidMount() {
           store.dispatch({ type: 'APPEND', body: 'a' })
         }
 
@@ -944,8 +944,8 @@ describe('React', () => {
 
       @connect((state) => ({ state }))
       class Child extends Component {
-        componentWillReceiveProps(nextProps) {
-          if (nextProps.state === 'A') {
+        componentDidMount() {
+          if (this.props.state === 'A') {
             store.dispatch({ type: 'APPEND', body: 'B' });
           }
         }
@@ -1927,7 +1927,7 @@ describe('React', () => {
 
       @connect(mapStateFactory)
       class Container extends Component {
-        componentWillUpdate() {
+        componentDidUpdate() {
           updatedCount++
         }
         render() {
@@ -2008,7 +2008,7 @@ describe('React', () => {
 
       @connect(null, mapDispatchFactory, mergeParentDispatch)
       class Passthrough extends Component {
-        componentWillUpdate() {
+        componentDIdUpdate() {
           updatedCount++
         }
         render() {
@@ -2120,7 +2120,7 @@ describe('React', () => {
 
       @connect(null)
       class Parent extends React.Component {
-        componentWillMount() {
+        UNSAFE_componentWillMount() {
           this.props.dispatch({ type: 'fetch' })
         }