SYNC_UPDATES.js

import Component from 'metal-jsx';

class Child extends Component {
	created() {
		this.incrementCount = this.incrementCount.bind(this);
		this.handleClick = this.handleClick.bind(this);
	}

	handleClick() {
		setTimeout(this.incrementCount, 0);
		setTimeout(this.incrementCount, 0);
	}

	incrementCount() {
		const {count} = this;

		this.onChange(count + 1);
	}

	render() {
		return (
			<div>
				<button onClick={this.handleClick}>Click Me</button>
				{this.count}
			</div>
		);
	}
}

Child.STATE = {
	count: {},
	onChange: {}
}

class Parent extends Component {
	created() {
		this.handleChange = this.handleChange.bind(this);
	}

	handleChange(value) {
		this.count = value;
	}

	render() {
		return (
			<div>
				<Child count={this.count} onChange={this.handleChange} />
			</div>
		);
	}
}

Parent.STATE = {
	count: {
		value: 0
	}
}

export default Parent;