Step 2: Why the h… did you update?

Looking closer, we decided to investigate why our EditorEnvelope component was updating, because we did not expect it to do so at this point. In theory, finding out why a React component updated is dead simple: either a part of the state it listens to has changed or its props have changed. We could rule out a state change quickly using the Redux dev tools, but finding out what exactly changed in a component’s props can be a bit harder, especially if you wrap components with decorators to give them additional capabilities, as we do for our extensibility use case. We added a few console.log() statements to shouldComponentUpdate, but the resulting output wasn’t really satisfying in terms of readability. So we decided to build a little tool to see exactly what changed in a component’s state, props, or context. This would allow us to use this tool to debug future performance issues much more easily.

We used an ES7-style decorator to wrap the shouldComponentUpdate function and get nice console output. Since a function decorator in ES7 has access to the object’s scope, we were able to extract the values of this.props, this.state and this.context to compare them with the new values passed to the decorated shouldComponentUpdate, and output any changes in a structured and readable way.