React and Immutable.js example

This application demonstrates how React always does a full re-render by default, and how you can change that behavior using shouldComponentUpdate and Immutable.js.

The application code is in the App.js file.

Get started:

• Run npm install
• Run gulp
• Run python -m SimpleHTTPServer in the build directory
• Open http://localhost:8000/

Based on Flux React Boilerplate.

shouldComponentUpdate

If shouldComponentUpdate isn't used all components are re-rendered every time any data changes.

Using shouldComponentUpdate means we only render a component if its data has changed. Using Immutable.js allows us to determine that by using a reference comparison between the old props and the new props, we don't need to do a deep comparison of objects.

This video shows what is re-rendered on each change.