DOM Reconciliation is the process of making the rendered page match the React component tree. Reusing elements is important for performance, and many of the best practices for building React apps emerge from the reconciliation process. Let’s break things to figure out how they work. In this talk we’ll look at an app that does everything wrong. As we fix the problems, we’ll see how React is able reuse more DOM nodes and reconcile the component tree and the DOM faster, recreating fewer nodes. By the end we’ll have a model for reconciliation that will give us a solid foundation for remembering best practices and building performant applications.