backport #3763 and #3743

src/component.js

@@ -53,7 +53,7 @@ Component.prototype.setState = function(update, callback) {
 
 	const internal = this._internal;
 	if (update != null && internal) {
-		if (callback) internal._commitCallbacks.push(callback.bind(this));
+		if (callback) internal._stateCallbacks.push(callback.bind(this));
 		internal.rerender(internal);
 	}
 };

src/diff/mount.js

@@ -367,6 +367,10 @@ function mountComponent(internal, startDom) {
 		if (renderHook) renderHook(internal);
 		if (ENABLE_CLASSES && internal.flags & TYPE_CLASS) {
 			renderResult = c.render(c.props, c.state, c.context);
+			for (let i = 0; i < internal._stateCallbacks.length; i++) {
+				internal._commitCallbacks.push(internal._stateCallbacks[i]);
+			}
+			internal._stateCallbacks = [];
 			// note: disable repeat render invocation for class components
 			break;
 		} else {

src/diff/patch.js

@@ -244,6 +244,10 @@ function patchComponent(internal, newVNode) {
 		c.props = newProps;
 		c.state = c._nextState;
 		internal.flags |= SKIP_CHILDREN;
+		for (let i = 0; i < internal._stateCallbacks.length; i++) {
+			internal._commitCallbacks.push(internal._stateCallbacks[i]);
+		}
+		internal._stateCallbacks = [];
 		return;
 	}
 
@@ -265,6 +269,10 @@ function patchComponent(internal, newVNode) {
 		if (renderHook) renderHook(internal);
 		if (ENABLE_CLASSES && internal.flags & TYPE_CLASS) {
 			renderResult = c.render(c.props, c.state, c.context);
+			for (let i = 0; i < internal._stateCallbacks.length; i++) {
+				internal._commitCallbacks.push(internal._stateCallbacks[i]);
+			}
+			internal._stateCallbacks = [];
 			// note: disable repeat render invocation for class components
 			break;
 		} else {

src/internal.d.ts

@@ -164,6 +164,7 @@ export interface Internal<P = {}> {
 	_depth: number | null;
 	/** Callbacks to invoke when this internal commits */
 	_commitCallbacks: Array<() => void>;
+	_stateCallbacks: Array<() => void>; // Only class components
 }
 
 export interface Component<P = {}, S = {}> extends preact.Component<P, S> {

src/tree.js

@@ -89,6 +89,7 @@ export function createInternal(vnode, parentInternal) {
 		_prevRef: null,
 		data: flags & TYPE_COMPONENT ? {} : null,
 		_commitCallbacks: flags & TYPE_COMPONENT ? [] : null,
+		_stateCallbacks: flags & TYPE_COMPONENT ? [] : null,
 		rerender: enqueueRender,
 		flags,
 		_children: null,

test/browser/lifecycles/componentDidMount.test.js

@@ -1,14 +1,17 @@
 import { createElement, render, Component } from 'preact';
+import { setupRerender } from 'preact/test-utils';
 import { setupScratch, teardown } from '../../_util/helpers';
 
 /** @jsx createElement */
 
 describe('Lifecycle methods', () => {
 	/** @type {HTMLDivElement} */
 	let scratch;
+	let rerender;
 
 	beforeEach(() => {
 		scratch = setupScratch();
+		rerender = setupRerender();
 	});
 
 	afterEach(() => {
@@ -32,5 +35,32 @@ describe('Lifecycle methods', () => {
 			render(<App />, scratch);
 			expect(spy).to.have.been.calledOnceWith(scratch.firstChild);
 		});
+
+		it('supports multiple setState callbacks', () => {
+			const spy = sinon.spy();
+
+			class App extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { count: 0 };
+				}
+
+				componentDidMount() {
+					// eslint-disable-next-line
+					this.setState({ count: 1 }, spy);
+					// eslint-disable-next-line
+					this.setState({ count: 2 }, spy);
+				}
+
+				render() {
+					return <div />;
+				}
+			}
+
+			render(<App />, scratch);
+
+			rerender();
+			expect(spy).to.have.been.calledTwice;
+		});
 	});
 });

test/browser/lifecycles/componentDidUpdate.test.js

@@ -381,5 +381,55 @@ describe('Lifecycle methods', () => {
 			expect(Inner.prototype.componentDidUpdate).to.have.been.called;
 			expect(outerChildText).to.equal(`Outer: ${newValue.toString()}`);
 		});
+
+		it('should not interfere with setState callbacks', () => {
+			let invocation;
+
+			class Child extends Component {
+				componentDidMount() {
+					this.props.setValue(10);
+				}
+				render() {
+					return <p>Hello world</p>;
+				}
+			}
+
+			class App extends Component {
+				constructor(props) {
+					super(props);
+					this.state = {
+						show: false,
+						count: null
+					};
+				}
+
+				componentDidMount() {
+					// eslint-disable-next-line
+					this.setState({ show: true });
+				}
+
+				componentDidUpdate() {}
+
+				render() {
+					if (this.state.show) {
+						return (
+							<Child
+								setValue={i =>
+									this.setState({ count: i }, () => {
+										invocation = this.state;
+									})
+								}
+							/>
+						);
+					}
+					return null;
+				}
+			}
+
+			render(<App />, scratch);
+
+			rerender();
+			expect(invocation.count).to.equal(10);
+		});
 	});
 });