Remove usages of async-unsafe lifecycle methods

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'`
 

package.json

@@ -53,7 +53,8 @@
     "lodash": "^4.17.5",
     "lodash-es": "^4.17.5",
     "loose-envify": "^1.1.0",
-    "prop-types": "^15.6.1"
+    "prop-types": "^15.6.1",
+    "react-lifecycles-compat": "^1.1.4"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

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

@@ -1,6 +1,7 @@
 import hoistStatics from 'hoist-non-react-statics'
 import invariant from 'invariant'
 import { Component, createElement } from 'react'
+import polyfill from 'react-lifecycles-compat'
 
 import Subscription from '../utils/Subscription'
 import { storeShape, subscriptionShape } from '../utils/PropTypes'
@@ -23,6 +24,10 @@ function makeSelectorStateful(sourceSelector, store) {
         selector.shouldComponentUpdate = true
         selector.error = error
       }
+    },
+    clean: function cleanComponentSelector() {
+      selector.run = noop
+      selector.shouldComponentUpdate = false
     }
   }
 
@@ -86,6 +91,11 @@ export default function connectAdvanced(
     [subscriptionKey]: subscriptionShape,
   }
 
+  function getDerivedStateFromProps(nextProps, prevState) {
+    prevState.selector.run(nextProps)
+    return null
+  }
+
   return function wrapWithConnect(WrappedComponent) {
     invariant(
       typeof WrappedComponent == 'function',
@@ -117,7 +127,6 @@ export default function connectAdvanced(
         super(props, context)
 
         this.version = version
-        this.state = {}
         this.renderCount = 0
         this.store = props[storeKey] || context[storeKey]
         this.propsMode = Boolean(props[storeKey])
@@ -129,7 +138,9 @@ export default function connectAdvanced(
           `or explicitly pass "${storeKey}" as a prop to "${displayName}".`
         )
 
-        this.initSelector()
+        this.state = {
+          selector: this.createSelector()
+        }
         this.initSubscription()
       }
 
@@ -152,25 +163,20 @@ export default function connectAdvanced(
         // dispatching an action in its componentWillMount, we have to re-run the select and maybe
         // re-render.
         this.subscription.trySubscribe()
-        this.selector.run(this.props)
-        if (this.selector.shouldComponentUpdate) this.forceUpdate()
-      }
-
-      componentWillReceiveProps(nextProps) {
-        this.selector.run(nextProps)
+        this.state.selector.run(this.props)
+        if (this.state.selector.shouldComponentUpdate) this.forceUpdate()
       }
 
-      shouldComponentUpdate() {
-        return this.selector.shouldComponentUpdate
+      shouldComponentUpdate(nextProps, nextState) {
+        return nextState.selector.shouldComponentUpdate
       }
 
       componentWillUnmount() {
         if (this.subscription) this.subscription.tryUnsubscribe()
         this.subscription = null
         this.notifyNestedSubs = noop
         this.store = null
-        this.selector.run = noop
-        this.selector.shouldComponentUpdate = false
+        this.state.selector.clean()
       }
 
       getWrappedInstance() {
@@ -185,10 +191,9 @@ export default function connectAdvanced(
         this.wrappedInstance = ref
       }
 
-      initSelector() {
+      createSelector() {
         const sourceSelector = selectorFactory(this.store.dispatch, selectorFactoryOptions)
-        this.selector = makeSelectorStateful(sourceSelector, this.store)
-        this.selector.run(this.props)
+        return makeSelectorStateful(sourceSelector, this.store)
       }
 
       initSubscription() {
@@ -209,9 +214,9 @@ export default function connectAdvanced(
       }
 
       onStateChange() {
-        this.selector.run(this.props)
+        this.state.selector.run(this.props)
 
-        if (!this.selector.shouldComponentUpdate) {
+        if (!this.state.selector.shouldComponentUpdate) {
           this.notifyNestedSubs()
         } else {
           this.componentDidUpdate = this.notifyNestedSubsOnComponentDidUpdate
@@ -247,7 +252,8 @@ export default function connectAdvanced(
       }
 
       render() {
-        const selector = this.selector
+        const selector = this.state.selector
+
         selector.shouldComponentUpdate = false
 
         if (selector.error) {
@@ -263,13 +269,13 @@ export default function connectAdvanced(
     Connect.childContextTypes = childContextTypes
     Connect.contextTypes = contextTypes
     Connect.propTypes = contextTypes
+    Connect.getDerivedStateFromProps = getDerivedStateFromProps
 
     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
-          this.initSelector()
 
           // If any connected descendants don't hot reload (and resubscribe in the process), their
           // listeners will be lost when we unsubscribe. Unfortunately, by copying over all
@@ -287,10 +293,16 @@ export default function connectAdvanced(
             this.subscription.trySubscribe()
             oldListeners.forEach(listener => this.subscription.listeners.subscribe(listener))
           }
+
+          const selector = this.createSelector()
+          selector.run(this.props)
+          this.setState({selector})
         }
       }
     }
 
+    polyfill(Connect)
+
     return hoistStatics(Connect, WrappedComponent)
   }
 }

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' });
           }
         }
@@ -1218,14 +1218,13 @@ describe('React', () => {
       const store = createStore(() => ({}))
 
       function makeContainer(mapState, mapDispatch, mergeProps) {
-        return React.createElement(
-          @connect(mapState, mapDispatch, mergeProps)
-          class Container extends Component {
-            render() {
-              return <Passthrough />
-            }
+        @connect(mapState, mapDispatch, mergeProps)
+        class Container extends Component {
+          render() {
+            return <Passthrough />
           }
-        )
+        }
+        return React.createElement(Container)
       }
 
       function AwesomeMap() { }
@@ -1928,7 +1927,7 @@ describe('React', () => {
 
       @connect(mapStateFactory)
       class Container extends Component {
-        componentWillUpdate() {
+        componentDidUpdate() {
           updatedCount++
         }
         render() {
@@ -2009,7 +2008,7 @@ describe('React', () => {
 
       @connect(null, mapDispatchFactory, mergeParentDispatch)
       class Passthrough extends Component {
-        componentWillUpdate() {
+        componentDIdUpdate() {
           updatedCount++
         }
         render() {
@@ -2121,10 +2120,6 @@ describe('React', () => {
 
       @connect(null)
       class Parent extends React.Component {
-        componentWillMount() {
-          this.props.dispatch({ type: 'fetch' })
-        }
-
         componentWillUnmount() {
           this.props.dispatch({ type: 'clean' })
         }
@@ -2144,6 +2139,7 @@ describe('React', () => {
       }
 
       const store = createStore(reducer)
+      store.dispatch({ type: 'fetch' })
       const div = document.createElement('div')
       ReactDOM.render(
         <ProviderMock store={store}>
@@ -2324,5 +2320,27 @@ describe('React', () => {
       expect(mapStateToPropsC).toHaveBeenCalledTimes(2)
       expect(mapStateToPropsD).toHaveBeenCalledTimes(2)
     })
+
+    it('works in <StrictMode> without warnings', () => {
+      const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
+      const store = createStore(stringBuilder)
+
+      @connect(state => ({ string: state }) )
+      class Container extends Component {
+        render() {
+          return <Passthrough {...this.props}/>
+        }
+      }
+
+      TestRenderer.create(
+        <React.StrictMode>
+          <ProviderMock store={store}>
+            <Container />
+          </ProviderMock>
+        </React.StrictMode>
+      )
+
+      expect(spy).not.toHaveBeenCalled()
+    })
   })
 })