[guscost]

One common optimization is to strategically use shouldComponentUpdate to limit the number of components that render each time the state changes. In this case you could create a Month component which renders a single <tr> element. This component would then implement shouldComponentUpdate to check if the state used to render that month has changed. If not, shouldComponentUpdate returns false and the month does not re-render. This means that clicking on a Day should re-render two Months at most.

The same shouldComponentUpdate optimization could be added to both Calendar and Day, but in this case clicking a Day would always require the Calendar to re-render, and running through 365 shouldComponentUpdate functions (returning false from at least 363 of them) without first limiting by Month would not be ideal.

If the state is managed with ImmutableJS or a similar library, shouldComponentUpdate would only have to do a single reference equality check. Either way you should see a big improvement from any implementation that allows the individual Month components to skip rendering:

http://facebook.github.io/react/docs/advanced-performance.ht...

[GiovanniFrigo]

Great! thanks for the explanation and the docs!