bennadel · September 10, 2015 11:28
diff --git a/state-timing.htm b/state-timing.htm
 <!doctype html>
 <html>
 <head>
 	<meta charset="utf-8" />

 	<title>
 		setState(), shouldComponentUpdate(), and render() Timing In ReactJS
 	</title>

 	<link rel="stylesheet" type="text/css" href="./demo.css"></link>
 </head>
 <body>

 	<h1>
 		setState(), shouldComponentUpdate(), and render() Timing In ReactJS
 	</h1>

 	<div id="content">
 		<!-- App will be rendered here. -->
 	</div>


 	<!-- Load scripts. -->
 	<script type="text/javascript" src="../../vendor/reactjs/react-0.13.3.min.js"></script>
 	<script type="text/javascript">

 		// I manage the root application component.
 		var Demo = React.createClass({

 			// I return the initial state of the component.
 			getInitialState: function() {

 				return({
 					status: "Pre-timeout",
 					count: 0
 				});

 			},


 			// ---
 			// PUBLIC METHODS.
 			// ---


 			// I get called once, on the client, when the component has been rendered
 			// in the DOM.
 			componentDidMount: function() {

 				setTimeout( this.handleTimeout, 1000 );

 			},


 			// I handle the click event.
 			// --
 			// CAUTION: Since this is powered by the onClick prop of the link element,
 			// it is managed through ReactJS' event delegation and allows state updates
 			// to be queued and flushed asynchronously.
 			handleClick: function( event ) {

 				console.warn( "handleClick()." );
 				console.log( "handleClick() - BEFORE setState()." );

 				var currentCount = this.state.count;

 				this.setState({
 					count: ++currentCount
 				});

 				this.setState({
 					count: ++currentCount
 				});

 				console.log( "handleClick() - AFTER setState()." );

 			},


 			// I handle the timeout event (callback).
 			// --
 			// CAUTION: Since this is powered by the setTimeout() method, it cannot be
 			// managed by ReactJS' event delegation system. As such, the state changes
 			// cannot be queued and must be applied synchronously.
 			handleTimeout: function() {

 				console.warn( "handleTimeout()." );
 				console.log( "handleTimeout() - BEFORE setState()." );

 				this.setState({
 					status: "Post-timeout"
 				});

 				this.setState({
 					count: ( this.state.count + 1 )
 				})

 				console.log( "handleTimeout() - AFTER setState()." );

 			},


 			// I return the virtual DOM based on the current component state.
 			render: function() {

 				console.log( "render()." );

 				return(
 					React.DOM.div(
 						null,
 						React.DOM.p(
 							null,
 							React.DOM.strong( null, "Status:" ),
 							" ",
 							this.state.status
 						),
 						React.DOM.p(
 							null,
 							React.DOM.strong( null, "Count:" ),
 							" ",
 							this.state.count
 						),
 						React.DOM.p(
 							null,
 							React.DOM.a(
 								{
 									onClick: this.handleClick
 								},
 								"Increment count"
 							)
 						)
 					)
 				);

 			},


 			// I determine if the virtual DOM should be recalculated based on the
 			// delta in the incoming state and props collections.
 			shouldComponentUpdate: function( newProps, newState ) {

 				console.log( "shouldComponentUpdate()." );
 				console.log(
 					". . . shouldComponentUpdate() - Status: new( %s ) vs. current( %s ).",
 					newState.status,
 					this.state.status
 				);
 				console.log(
 					". . . shouldComponentUpdate() - Count: new( %s ) vs. current( %s ).",
 					newState.count,
 					this.state.count
 				);

 				return( true );

 			}

 		});


 		// --------------------------------------------------------------------------- //
 		// --------------------------------------------------------------------------- //


 		// Render the root Demo and mount it inside the given element.
 		React.render(
 			React.createElement( Demo ),
 			document.getElementById( "content" )
 		);

 	</script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />

	<title>
	setState(), shouldComponentUpdate(), and render() Timing In ReactJS
	</title>

	<link rel="stylesheet" type="text/css" href="./demo.css"></link>
	</head>
	<body>

	<h1>
	setState(), shouldComponentUpdate(), and render() Timing In ReactJS
	</h1>

	<div id="content">
	<!-- App will be rendered here. -->
	</div>


	<!-- Load scripts. -->
	<script type="text/javascript" src="../../vendor/reactjs/react-0.13.3.min.js"></script>
	<script type="text/javascript">

	// I manage the root application component.
	var Demo = React.createClass({

	// I return the initial state of the component.
	getInitialState: function() {

	return({
	status: "Pre-timeout",
	count: 0
	});

	},


	// ---
	// PUBLIC METHODS.
	// ---


	// I get called once, on the client, when the component has been rendered
	// in the DOM.
	componentDidMount: function() {

	setTimeout( this.handleTimeout, 1000 );

	},


	// I handle the click event.
	// --
	// CAUTION: Since this is powered by the onClick prop of the link element,
	// it is managed through ReactJS' event delegation and allows state updates
	// to be queued and flushed asynchronously.
	handleClick: function( event ) {

	console.warn( "handleClick()." );
	console.log( "handleClick() - BEFORE setState()." );

	var currentCount = this.state.count;

	this.setState({
	count: ++currentCount
	});

	this.setState({
	count: ++currentCount
	});

	console.log( "handleClick() - AFTER setState()." );

	},


	// I handle the timeout event (callback).
	// --
	// CAUTION: Since this is powered by the setTimeout() method, it cannot be
	// managed by ReactJS' event delegation system. As such, the state changes
	// cannot be queued and must be applied synchronously.
	handleTimeout: function() {

	console.warn( "handleTimeout()." );
	console.log( "handleTimeout() - BEFORE setState()." );

	this.setState({
	status: "Post-timeout"
	});

	this.setState({
	count: ( this.state.count + 1 )
	})

	console.log( "handleTimeout() - AFTER setState()." );

	},


	// I return the virtual DOM based on the current component state.
	render: function() {

	console.log( "render()." );

	return(
	React.DOM.div(
	null,
	React.DOM.p(
	null,
	React.DOM.strong( null, "Status:" ),
	" ",
	this.state.status
	),
	React.DOM.p(
	null,
	React.DOM.strong( null, "Count:" ),
	" ",
	this.state.count
	),
	React.DOM.p(
	null,
	React.DOM.a(
	{
	onClick: this.handleClick
	},
	"Increment count"
	)
	)
	)
	);

	},


	// I determine if the virtual DOM should be recalculated based on the
	// delta in the incoming state and props collections.
	shouldComponentUpdate: function( newProps, newState ) {

	console.log( "shouldComponentUpdate()." );
	console.log(
	". . . shouldComponentUpdate() - Status: new( %s ) vs. current( %s ).",
	newState.status,
	this.state.status
	);
	console.log(
	". . . shouldComponentUpdate() - Count: new( %s ) vs. current( %s ).",
	newState.count,
	this.state.count
	);

	return( true );

	}

	});


	// --------------------------------------------------------------------------- //
	// --------------------------------------------------------------------------- //


	// Render the root Demo and mount it inside the given element.
	React.render(
	React.createElement( Demo ),
	document.getElementById( "content" )
	);

	</script>

	</body>
	</html>