# Avoiding Reconciliation

Even if reconciliation is fast, there are situations where you might want to manually bypass reconciliation completely for a component in order to eek out more performance.

Whenever a component's state changes, React re-renders the component and **all of its children**. Often times, the component and its children barely change yet we need to re-render everything. This seems inefficient, doesn't it?

Remember that React works with a virtual representation of the DOM, only interacting with the actual DOM when needed. If one render pass results in the same contents as the previous render, it is a no-op with respect to DOM interactions. If you want to take an even shorter shortcut, the component lifecycle hook `shouldComponentUpdate` lets you bypass rendering the virtual DOM completely.

```javascript
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) { 
    /* 
     * You can compare nextProps/nextState to this.props / this.state to determine
     * whether the component should re-render or not.
     * This function should return a boolean (whether the component should re-render)
     */
    return false; 
  }
}
```

**Premature Optimization?** You typically shouldn't need to use `shouldComponentUpdate` unless you notice performance issues and suspect over-aggresive rerendering as the culprit. Using `shouldComponentUpdate` adds code complexity and more surface area for bugs to appear, especially ones that are hard to debug.

There are two reasons why you may want to optimize with `shouldComponentUpdate`:

* You have used [profiler tools](http://facebook.github.io/react/docs/perf.html#perf.printwastedmeasurements) and it is telling you that there is significant wasted time rendering for nothing.
* You are able to make strong guarantees about when a component can and cannot change.

In either of these case, you should likely consider using `React.PureComponent` over using `shouldComponentUpdate` manually.