Talk by Anthony Garritano at All Things Open 2019. Most of us have at least dabbled with the shiny frontend technologies that have come out in the past decade. But do we know how they really work? In this talk we’ll examine how React implements a Virtual DOM to quickly render changes to the user interface. By the end of this talk the audience will… 1.Know the basics of UI rendering with JS through a Virtual DOM. 2. Understand React’s Reconcilliation, the process of determining which Virtual DOM nodes should be turned into real DOM nodes. 3. Have more confidence about the frontend technology decisions they make through an understanding of how they work.

1. REACT
UNDER THE
HOOD
Understanding React’s UI
Rendering Process

2. HTML & The DOM
Components & Elements
Reconciliation
Rendering
Fiber

3. HTML & The DOM
Components & Elements
Reconciliation
Rendering
Fiber

4. HTML & THE DOM
<main>
<h1 id="title">Look ma!</h1>
</main>

5. HTML & THE DOM
<main>
<h1 id="title">Look ma!</h1>
</main>
const root = document.getElementById("title")
root.innerHTML = "Hellloooo New York!!"

6. HTML & The DOM
Components & Elements
Reconciliation
Rendering
Fiber

7. COMPONENT USING JSX
const MyComponent = () => {
return (
<main>
<h1 id="title">Look ma!</h1>
</main>
)
}

8. RETURNED ELEMENT
{
type: "main",
key: null,
ref: null,
"$$typeof": Symbol(react.element),
props: {
children: {
type: "h1",
key: null,
ref: null,
props: {
id: "title",
children: "Look ma!"
},
}}}

9. VIEW AN ELEMENT
const MyComponent = (
<main>
<h1 id="title">Look ma!</h1>
</main>
)
console.log(MyComponent)

10. Shadow DOM?

11. HTML & The DOM
Components & Elements
Reconciliation
Rendering
Fiber

12. RECONCILIATION - TYPE CHANGE
<Wrapper>
<ProductList />
</Wrapper>
<Wrapper>
<IndividualProduct />
</Wrapper>

13. RECONCILIATION - DOM ELEMENT
<div
className="before"
title="stuff"
/>
<div
className="after"
title="stuff"
/>

14. RECONCILIATION - COMPONENT ELEMENT
<Wrapper>
<IndividualProduct
id={17}
/>
</Wrapper>
<Wrapper>
<IndividualProduct
id={32}
/>
</Wrapper>

15. RECONCILIATION - CHILDREN
<ul>
<li>first</li>
<li>second</li>
</ul>

16. RECONCILIATION - CHILDREN
<ul>
<li>first</li>
<li>second</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

17. RECONCILIATION - CHILDREN
<ul>
<li>Star Wars</li>
<li>Star Trek</li>
</ul>

18. RECONCILIATION - CHILDREN
<ul>
<li>Star Wars</li>
<li>Star Trek</li>
</ul>
<ul>
<li>Spaceballs</li>
<li>Star Wars</li>
<li>Star Trek</li>
</ul>

19. RECONCILIATION - CHILDREN
<ul>
<li key='best'>Star Wars</li>
<li key='second-best'>Star Trek</li>
</ul>

20. RECONCILIATION - CHILDREN
<ul>
<li key="actual-best">Spaceballs</li>
<li key='best'>Star Wars</li>
<li key='second best'>Star Trek</li>
</ul>

21. RECONCILIATION - CHILDREN
<ul>
{
items.map((item, index) => {
return (
<li key={index}>{item.name}</li>
)
})
}
</ul>

22. RECONCILIATION - CHILDREN
<ul>
{
items.map((item, index) => {
return (
<li key={item.id}>{item.name}</li>
)
})
}
</ul>

23. RECONCILIATION - CHILDREN
<ul>
<li key="Spaceballs">Spaceballs</li>
<li key="Star Wars">Star Wars</li>
<li key="Star Trek">Star Trek</li>
</ul>

24. HTML & The DOM
Components & Elements
Reconciliation
Rendering
Fiber

25. RECONCILIATION - CHILDREN
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(
<App />,
document.getElementById("root")
);

26. RECONCILIATION - CHILDREN
import { AppRegistry } from "react-native";
import App from "./App.js";
AppRegistry.registerComponent(
"MyApp",
() => App
);

27. HTML & The DOM
Components & Elements
Reconciliation
Rendering
Fiber

28. @callmetwan

29. FIN
➤ https://reactjs.org/blog/2014/10/14/introducing-react-
elements.html
➤ https://reactjs.org/blog/2015/12/18/react-components-
elements-and-instances.html
➤ https://reactjs.org/docs/reconciliation.html
➤ https://github.com/reactjs/react-basic
➤ https://overreacted.io/why-do-react-elements-have-typeof-
property/
➤ https://github.com/acdlite/react-fiber-architecture