Call componentWillMount and componentWillUnmount when merging state

The temporary new component instance created by mergeState
may set up subscriptions to data stores etc.

In an attempt to dispose these handlers, call componentWillMount
and componentWillUnmount immediately after constructing the instance.

src/mergeState.js

@@ -6,6 +6,19 @@ export default function mergeState(component, NextComponent) {
   if (component instanceof React.Component) {
     // Modern components
     const nextComponentInstance = new NextComponent(component.props);
+
+    // In addition to setting this.state, the constructor may
+    // also have set up subscriptions to data sources etc.
+    //
+    // In an attempt to cleanup such resources, call
+    // the pre-mount and pre-unmount handlers.
+    if (nextComponentInstance.componentWillMount) {
+      nextComponentInstance.componentWillMount();
+    }
+    if (nextComponentInstance.componentWillUnmount) {
+      nextComponentInstance.componentWillUnmount();
+    }
+
     const mergedState = assign({}, nextComponentInstance.state, component.state);
     if (!shallowEqual(component.state || {}, mergedState)) {
       component.setState(mergedState);

test/merge-state.js

@@ -54,6 +54,45 @@ const fixtures = {
         return <div>{this.state.counter}</div>;
       }
     },
+
+    SubscriberA: class SubscriberA extends React.Component {
+      constructor(props) {
+        super(props);
+        this._subscriptions = [props.store.subscribe(() => {})];
+      }
+
+      componentWillMount() {
+        this._subscriptions.push(this.props.store.subscribe(() => {}));
+      }
+
+      componentWillUnmount() {
+        this._subscriptions.forEach(unsubscribe => unsubscribe());
+      }
+
+      render() {
+        return <div></div>;
+      }
+    },
+
+    SubscriberB: class SubscriberB extends React.Component {
+      constructor(props) {
+        super(props);
+        this._subscriptions = [props.store.subscribe(() => {})];
+      }
+
+      componentWillMount() {
+        this._subscriptions.push(this.props.store.subscribe(() => {}));
+      }
+
+      componentWillUnmount() {
+        this._subscriptions.forEach(unsubscribe => unsubscribe());
+      }
+
+      render() {
+        return <div></div>;
+      }
+    },
+
   },
 
   classic: {
@@ -123,6 +162,24 @@ describe('merging state', () => {
       renderer.render(<Proxy/>);
       expect(renderer.getRenderOutput().props.children).toEqual(['VersionC: ', 1, 1]);
     });
+
+    it('calls componentWillMount and componentWillUnmount', () => {
+      const { SubscriberA, SubscriberB } = fixtures.modern;
+      let listeners = [];
+      const store = {
+        subscribe(fn) {
+          listeners.push(fn);
+          return () => listeners = listeners.filter(l => l !== fn);
+        }
+      };
+      const proxy = createProxy(SubscriberA);
+      const Proxy = proxy.get();
+      const instance = renderer.render(<Proxy store={store}/>);
+      expect(listeners.length).toEqual(2);
+      proxy.update(SubscriberB);
+      renderer.render(<Proxy store={store}/>);
+      expect(listeners.length).toEqual(2);
+    });
   });
 
   describe('classic', () => {