Component optimization

Now that we've fixed our component communication performance bottlenecks, it's time to look inside our components, at the implementation specifics and the performance issues they may present. For example, maintaining state is a common requirement of JavaScript components, however, this does not scale well performance-wise because of all the book-keeping code required. We also need to be aware of side effects introduced by functions that mutate data that other components use. Finally, the DOM itself, and the way our code interacts with it, has much potential for unresponsiveness.

Components that maintain state

Most components in our code need to maintain state, and this is unavoidable for the most part. For example, if our component is composed of a model and a view, the view needs to know when to render itself, based on the state of the model. The view also holds a reference to a DOM element—either directly or through a selector string—and any given element has state...