+ADw-p+AD4-React is fast+ACE Some of that speed comes from updating only the parts of the DOM that need it. Less for you to worry about and a speed gain to boot. As long as you understand the +ADw-a href+AD0AIg-https://css-tricks.com/understanding-react-setstate/+ACIAPg-workings of +ADw-code+AD4-setState()+ADw-/code+AD4APA-/a+AD4, you should be good to go. However, it+IBk-s also important to familiarize yourself with +ADw-em+AD4-how+ADw-/em+AD4 this amazing library updates the DOM of your application. Knowing this will be instrumental in your work as a React developer.+ADw-/p+AD4 +ADw-p+AD4APA-span id+AD0AIg-more-270816+ACIAPgA8-/span+AD4APA-/p+AD4 +ADw-h3+AD4-The DOM?+ADw-/h3+AD4 +ADw-p+AD4-The browser builds the DOM by parsing the code you write, it does this before it renders the page. +ADw-a href+AD0AIg-https://css-tricks.com/dom/+ACIAPg-The DOM+ADw-/a+AD4 represents documents in the page as nodes and objects, providing an interface so that programming languages can plug in and manipulate the DOM. The problem with the DOM is that it is not optimized for dynamic +ADw-abbr title+AD0AIg-User Interface+ACIAPg-UI+ADw-/abbr+AD4 applications. So, updating the DOM can slow your application when there are a lot of things to be changed+ADs as the browser has to reapply all styles and render new HTML elements. This also happens in situations where nothing changes.+ADw-/p+AD4 +ADw-h3+AD4-What is Reconciliation?+ADw-/h3+AD4 +ADw-p+AD4-Reconciliation is the process through which React updates the DOM. When a component's +ADw-a href+AD0AIg-https://css-tricks.com/react-state-from-the-ground-up/+ACIAPg-state changes+ADw-/a+AD4, React has to calculate if it is necessary to update the DOM. It does this by creating a +ADw-em+AD4-virtual+ADw-/em+AD4 DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new of the component.+ADw-/p+AD4 +ADw-p+AD4-Let's build a simple component that adds two numbers. The numbers will be entered in an input field.+ADw-/p+AD4 +ADw-p data-height+AD0AIg-255+ACI data-theme-id+AD0AIg-1+ACI data-slug-hash+AD0AIg-EEqNzq+ACI data-default-tab+AD0AIg-js,result+ACI data-user+AD0AIg-kinsomicrote+ACI data-embed-version+AD0AIg-2+ACI data-pen-title+AD0AIg-reconciliation Pen+ACI class+AD0AIg-codepen+ACIAPg-See the Pen +ADw-a href+AD0AIg-https://codepen.io/kinsomicrote/pen/EEqNzq/+ACIAPg-reconciliation Pen+ADw-/a+AD4 by Kingsley Silas Chijioke (+ADw-a href+AD0AIg-https://codepen.io/kinsomicrote+ACIAPgBA-kinsomicrote+ADw-/a+AD4) on +ADw-a href+AD0AIg-https://codepen.io+ACIAPg-CodePen+ADw-/a+AD4.+ADw-/p+AD4 +ADw-p+AD4-First, we'll need to set up the initial state for the fields, then update the state when a number is entered. The component will look like this:+ADw-/p+AD4 +ADw-pre rel+AD0AIg-JavaScript+ACIAPgA8-code class+AD0AIg-language-javascript+ACIAPg-class App extends React.Component +AHs state +AD0 +AHs result: '', entry1: '', entry2: '' +AH0 handleEntry1 +AD0 (event) +AD0AJg-gt+ADs +AHs this.setState(+AHs-entry1: event.target.value+AH0) +AH0 handleEntry2 +AD0 (event) +AD0AJg-gt+ADs +AHs this.setState(+AHs-entry2: event.target.value+AH0) +AH0 handleAddition +AD0 (event) +AD0AJg-gt+ADs +AHs const firstInt +AD0 parseInt(this.state.entry1) const secondInt +AD0 parseInt(this.state.entry2) this.setState(+AHs-result: firstInt +ACs secondInt +AH0) +AH0 render() +AHs const +AHs entry1, entry2, result +AH0 +AD0 this.state return( +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-p+ACY-gt+ADs-Entry 1: +AHs entry1 +AH0AJg-lt+ADs-/p+ACY-gt+ADs +ACY-lt+ADs-p+ACY-gt+ADs-Entry 2: +AHs entry2 +AH0AJg-lt+ADs-/p+ACY-gt+ADs +ACY-lt+ADs-p+ACY-gt+ADs-Result: +AHs result +AH0AJg-lt+ADs-/p+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +ACY-lt+ADs-br /+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ADw-span+AD4-Entry 1: +ADw-/span+AD4 +ACY-lt+ADs-input type+AD0'text' onChange+AD0Aew-this.handleEntry1+AH0 /+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +ACY-lt+ADs-br /+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ADw-span+AD4-Entry 2: +ADw-/span+AD4 +ACY-lt+ADs-input type+AD0'text' onChange+AD0Aew-this.handleEntry2+AH0 /+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-button onClick+AD0Aew-this.handleAddition+AH0 type+AD0'submit'+ACY-gt+ADs-Add+ACY-lt+ADs-/button+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs ) +AH0 +AH0APA-/code+AD4APA-/pre+AD4 +ADw-p+AD4-On initial render, the DOM tree will look like this+ADsAPA-/p+AD4 +ADw-figure id+AD0AIg-post-270817+ACI class+AD0AIg-align-none media-270817+ACIAPgA8-img src+AD0AIg-https://cdn.css-tricks.com/wp-content/uploads/2018/05/react-reconciliation-1.png+ACI srcset+AD0AIg-https://res.cloudinary.com/css-tricks/image/upload/c+AF8-scale,w+AF8-348,f+AF8-auto,q+AF8-auto/v1525816590/react-reconciliation-1+AF8-dmv3w2.png 348w, https://res.cloudinary.com/css-tricks/image/upload/c+AF8-scale,w+AF8-200,f+AF8-auto,q+AF8-auto/v1525816590/react-reconciliation-1+AF8-dmv3w2.png 200w+ACI sizes+AD0AIg(min-width: 1850px) calc( (100vw - 555px) / 3 ) (min-width: 1251px) calc( (100vw - 530px) / 2 ) (min-width: 1086px) calc(100vw - 480px) (min-width: 626px) calc(100vw - 335px) calc(100vw - 30px)+ACI alt+AD0AIg-A screenshot from DevTools that shows the HTML rendering of the app.+ACI /+AD4APA-/figure+AD4 +ADw-p+AD4-When an entry is made in the first input field, React creates a new tree. The new tree which is the virtual DOM will contain the new state for +ADw-code+AD4-entry1+ADw-/code+AD4. Then, React compares the virtual DOM with the old DOM and, from the comparison, it figures out the difference between both DOMs and makes an update to only the part that is different. A new tree is created each time the state of +ADw-code+AD4-App+ADw-/code+AD4 component changes +ACY-mdash+ADs when a value is entered in either of the inputs field, or when the is clicked.+ADw-/p+AD4 +ADw-figure id+AD0AIg-post-270819+ACI class+AD0AIg-align-none media-270819+ACIAPgA8-img src+AD0AIg-https://cdn.css-tricks.com/wp-content/uploads/2018/05/react-reconciliation-2.gif+ACI srcset+AD0AIg-https://res.cloudinary.com/css-tricks/image/upload/c+AF8-scale,w+AF8-600,f+AF8-auto,q+AF8-auto/v1525816716/react-reconciliation-2+AF8-szpug8.gif 600w, https://res.cloudinary.com/css-tricks/image/upload/c+AF8-scale,w+AF8-200,f+AF8-auto,q+AF8-auto/v1525816716/react-reconciliation-2+AF8-szpug8.gif 200w+ACI sizes+AD0AIg(min-width: 1850px) calc( (100vw - 555px) / 3 ) (min-width: 1251px) calc( (100vw - 530px) / 2 ) (min-width: 1086px) calc(100vw - 480px) (min-width: 626px) calc(100vw - 335px) calc(100vw - 30px)+ACI alt+AD0AIg-Animated gif showing how the markup in DevTools changes when numbers are added to the input field.+ACI /+AD4APA-/figure+AD4 +ADw-h3+AD4-Diffing Different Elements+ADw-/h3+AD4 +ADw-p+AD4-When the state of a component changes so that an element needs to be changed from one type to another, React unmounts the whole tree and builds a new one from scratch. This causes every node in that tree to be destroyed.+ADw-/p+AD4 +ADw-p+AD4-Let's see an example:+ADw-/p+AD4 +ADw-pre rel+AD0AIg-JavaScript+ACIAPgA8-code class+AD0AIg-language-javascript+ACIAPg-class App extends React.Component +AHs state +AD0 +AHs change: true +AH0 handleChange +AD0 (event) +AD0AJg-gt+ADs +AHs this.setState(+AHs-change: +ACE-this.state.change+AH0) +AH0 render() +AHs const +AHs change +AH0 +AD0 this.state return( +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-button onClick+AD0Aew-this.handleChange+AH0AJg-gt+ADs-Change+ACY-lt+ADs-/button+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +AHs change ? +ACY-lt+ADs-div+ACY-gt+ADs This is div cause it's true +ACY-lt+ADs-h2+ACY-gt+ADs-This is a h2 element in the div+ACY-lt+ADs-/h2+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs : +ACY-lt+ADs-p+ACY-gt+ADs This is a p element cause it's false +ACY-lt+ADs-br /+ACY-gt+ADs +ADw-span+AD4-This is another paragraph in the false paragraph+ADw-/span+AD4 +ACY-lt+ADs-/p+ACY-gt+ADs +AH0 +ACY-lt+ADs-/div+ACY-gt+ADs ) +AH0 +AH0APA-/code+AD4APA-/pre+AD4 +ADw-p+AD4-On initial render, you will see the div and its contents and how clicking the button causes React to destroy the div's tree with its content and build a tree for the +ADw-code+AD4AJg-lt+ADs-p+ACY-gt+ADsAPA-/code+AD4 element instead. Same happens if we have the same component in both cases. The component will be destroyed alongside the previous tree it belonged to, and a new instance will be built. See the demo below+ADsAPA-/p+AD4 +ADw-p data-height+AD0AIg-292+ACI data-theme-id+AD0AIg-1+ACI data-slug-hash+AD0AIg-MGWooq+ACI data-default-tab+AD0AIg-js,result+ACI data-user+AD0AIg-kinsomicrote+ACI data-embed-version+AD0AIg-2+ACI data-pen-title+AD0AIg-reconciliation-2 Pen+ACI class+AD0AIg-codepen+ACIAPg-See the Pen +ADw-a href+AD0AIg-https://codepen.io/kinsomicrote/pen/MGWooq/+ACIAPg-reconciliation-2 Pen+ADw-/a+AD4 by Kingsley Silas Chijioke (+ADw-a href+AD0AIg-https://codepen.io/kinsomicrote+ACIAPgBA-kinsomicrote+ADw-/a+AD4) on +ADw-a href+AD0AIg-https://codepen.io+ACIAPg-CodePen+ADw-/a+AD4.+ADw-/p+AD4 +ADw-h3+AD4-Diffing Lists+ADw-/h3+AD4 +ADw-p+AD4APA-a href+AD0AIg-https://reactjs.org/docs/lists-and-keys.html+ACIAPg-React uses keys+ADw-/a+AD4 to keep track of items in a list. The keys help it figure out the position of the item on a list. What happens when a list does not have keys? React will mutate every child of the list even if there are no new changes.+ADw-/p+AD4 +ADw-p+AD4-In other words, React changes every item in a list that does not have keys.+ADw-/p+AD4 +ADw-p+AD4-Here's an example:+ADw-/p+AD4 +ADw-pre rel+AD0AIg-JavaScript+ACIAPgA8-code class+AD0AIg-language-javascript+ACIAPg-const firstArr +AD0 +AFs'', 'codesandbox'+AF0 const secondArr +AD0 +AFs'github', 'codepen', 'bitbucket', 'codesanbox'+AF0 class App extends React.Component +AHs state +AD0 +AHs change: true +AH0 handleChange +AD0 (event) +AD0AJg-gt+ADs +AHs this.setState(+AHs-change: +ACE-this.state.change+AH0) +AH0 render() +AHs const +AHs change +AH0 +AD0 this.state return( +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-button onClick+AD0Aew-this.handleChange+AH0AJg-gt+ADs-Change+ACY-lt+ADs-/button+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +ACY-lt+ADs-ul+ACY-gt+ADs +AHs change ? firstArr.map((e) +AD0AJg-gt+ADs +ACY-lt+ADs-li+ACY-gt+ADsAew-e+AH0AJg-lt+ADs-/li+ACY-gt+ADs) : secondArr.map((e) +AD0AJg-gt+ADs +ACY-lt+ADs-li+ACY-gt+ADsAew-e+AH0AJg-lt+ADs-/li+ACY-gt+ADs) +AH0 +ACY-lt+ADs-/ul+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs ) +AH0 +AH0APA-/code+AD4APA-/pre+AD4 +ADw-p+AD4-Here, we have two arrays that get rendered depending on the state of the component. React has no way of keep track of the items on the list, so it is bound to change the whole list each time there is a need to re-render. This results in performance issues.+ADw-/p+AD4 +ADw-p+AD4-In your console, you will see a warning like this:+ADw-/p+AD4 +ADw-pre rel+AD0AIg-Console+ACIAPgA8-code class+AD0AIg-language-markup+ACIAPg-Warning: Each child in an array or iterator should have a unique +ACI-key+ACI prop.+ADw-/code+AD4APA-/pre+AD4 +ADw-p+AD4-To fix this, you add a unique key for each item on the list.+ADw-/p+AD4 +ADw-pre rel+AD0AIg-JavaScript+ACI data-line+AD0AIg-26,28+ACIAPgA8-code class+AD0AIg-language-javascript+ACIAPg-const firstArr +AD0 +AFs'codepen', 'codesandbox'+AF0 const secondArr +AD0 +AFs'github', 'codepen', 'bitbucket', 'codesanbox'+AF0 class App extends React.Component +AHs state +AD0 +AHs change: true +AH0 handleChange +AD0 (event) +AD0AJg-gt+ADs +AHs this.setState(+AHs-change: +ACE-this.state.change+AH0) +AH0 render() +AHs const +AHs change +AH0 +AD0 this.state return( +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-div+ACY-gt+ADs +ACY-lt+ADs-button onClick+AD0Aew-this.handleChange+AH0AJg-gt+ADs-Change+ACY-lt+ADs-/button+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs +ACY-lt+ADs-ul+ACY-gt+ADs +AHs change ? firstArr.map((e, index) +AD0AJg-gt+ADs +ACY-lt+ADs-li key+AD0Aew-e.index+AH0AJg-gt+ADsAew-e+AH0AJg-lt+ADs-/li+ACY-gt+ADs) : secondArr.map((e, index) +AD0AJg-gt+ADs +ACY-lt+ADs-li key+AD0Aew-e.index+AH0AJg-gt+ADsAew-e+AH0AJg-lt+ADs-/li+ACY-gt+ADs) +AH0 +ACY-lt+ADs-/ul+ACY-gt+ADs +ACY-lt+ADs-/div+ACY-gt+ADs ) +AH0 +AH0APA-/code+AD4APA-/pre+AD4 +ADw-p data-height+AD0AIg-265+ACI data-theme-id+AD0AIg-1+ACI data-slug-hash+AD0AIg-NMWvpe+ACI data-default-tab+AD0AIg-js,result+ACI data-user+AD0AIg-kinsomicrote+ACI data-embed-version+AD0AIg-2+ACI data-pen-title+AD0AIg-reconciliation-3 Pen+ACI class+AD0AIg-codepen+ACIAPg-See the Pen +ADw-a href+AD0AIg-https://codepen.io/kinsomicrote/pen/NMWvpe/+ACIAPg-reconciliation-3 Pen+ADw-/a+AD4 by Kingsley Silas Chijioke (+ADw-a href+AD0AIg-https://codepen.io/kinsomicrote+ACIAPgBA-kinsomicrote+ADw-/a+AD4) on +ADw-a href+AD0AIg-https://codepen.io+ACIAPg-CodePen+ADw-/a+AD4.+ADw-/p+AD4 +ADw-h3+AD4-Wrapping Up+ADw-/h3+AD4 +ADw-p+AD4-In summary, here are the two big takeaways for understanding how the concept of reconciliation works in React:+ADw-/p+AD4 +ADw-ul+AD4 +ADw-li+AD4-React can make your +ADw-abbr title+AD0AIg-User Interface+ACIAPg-UI+ADw-/abbr+AD4 fast, but it needs your help. It+IBk-s good to understand its +ADw-a href+AD0AIg-https://reactjs.org/docs/reconciliation.html+ACIAPg-reconciliation process+ADw-/a+AD4.+ADw-/li+AD4 +ADw-li+AD4-React doesn't do a full rerender of your DOM nodes. It only changes what it needs to. The diffing process is so fast that you might not notice it.+ADw-/li+AD4 +ADw-/ul+AD4 +ADw-p+AD4-The post +ADw-a rel+AD0AIg-nofollow+ACI href+AD0AIg-https://css-tricks.com/how-react-reconciliation-works/+ACIAPg-How React Reconciliation Works+ADw-/a+AD4 appeared first on +ADw-a rel+AD0AIg-nofollow+ACI href+AD0AIg-https://css-tricks.com+ACIAPg-CSS-Tricks+ADw-/a+AD4.+ADw-/p+AD4