My React Next 2023 talk about React-DOM code , details about the rendering and updating circle, how react-dom detects changes and how everything gets updated. with screenshots from the debugger travelling through the code.

1. React-DOM
deepdive
Ran Wahle

2. About Me
Ran Wahle
Volunteer

3. “Vanilla is good, only if I could
make a living out of it”
About Me
Ran Wahle
Frontend
developer @Tikal

4. Let’s start with
simple code
export class Tooltip
extends HTMLElement
{
set title(value: string) {
this._title = value;
this.render();
}
connectedCallback() {
this.render();
}
render() {
this.innerHTML = `< p class="tooltip-
title">${this.title}</p>`
}
}
customElements.define(`my-tooltip` , target);

5. This is nice but…

6. This is nice but
it is not declarative

7. This is nice but
it is not scalable

8. This is nice but
the overhead is too big

9. We need an adapter

10. We need an adapter
<div className="App">
<h1>My React Component</h1>
<button onClick={() =>
setCount((count) => count + 1)}>
count is {count}
</button>
</div>
<div class="App">
<h1>My React Component</h1>
<button>count is 0</button>
</div>

11. Props
Events Attributes
Prerequisites

12. To Code
const simpleEventPluginEvents = [
'abort',
…
'click',
'close',
'contextMenu',
'copy',
'cut',
'Drag',
…
]
Props
Events
Event translation
To Code >

13. To Code >
Register simple events, Props
Events

14. To Code >
Register simple event, Props
Events

15. To Code >
Register simple events -
irregular ones
Props
Events

16. Attribute to Props Props
Attributes

17. Props
Events Attributes
Mapping recap
It’s all about mapping

18. beginWork
Determine the
component
Run our code
Diffing
algorithm
Update DOM
Setting initial
properties
Events

19. Now, off to work

20. performUnitOfWork
function performUnitOfWork(unitOfWork) {
next = beginWork(current,
unitOfWork, renderLanes);
unitOfWork.memoizedProps =
unitOfWork.pendingProps;
if (next === null) {
completeUnitOfWork(unitOfWor
k);
} else {
workInProgress = next;
}
}
To Code >

21. performUnitOfWork
function performUnitOfWork(unitOfWork) {
next = beginWork(current,
unitOfWork, renderLanes);
unitOfWork.memoizedProps =
unitOfWork.pendingProps;
if (next === null) {
completeUnitOfWork(unitOfWor
k);
} else {
workInProgress = next;
}
}
To Code >
Run our code,
set initial
properties

22. performUnitOfWork
function performUnitOfWork(unitOfWork) {
next = beginWork(current,
unitOfWork, renderLanes);
unitOfWork.memoizedProps =
unitOfWork.pendingProps;
if (next === null) {
completeUnitOfWork(unitOfWor
k);
} else {
workInProgress = next;
}
}
To Code >
Diff algorithm, mark and
update

23. What is this workInProgress?

24. What is this workInProgress?
This is our code

25. beginWork
Determine the
component
Run our code
Diffing
algorithm
Update DOM
Setting initial
properties
We are here
Events

26. Mount component

27. mountIndeterminateComponent →
Render with hooks

28. beginWork
Determine the
component
Run our code
Diffing
algorithm
Update DOM
Setting initial
properties
We are here
Events

29. Inside renderWithHooks

30. Continue mounting indeterminedComponent

31. completeWork - Going to the DOM
function completeWork(current, workInProgress, renderLanes) {
const newProps = workInProgress.pendingProps
//…
switch (workInProgress.tag) {
//…
case HostComponent: {
const instance = createInstance(type, newProps, rootContainerInstance,
currentHostContext, workInProgress);
//…
workInProgress.stateNode = instance;
}
}
}

32. completeWork - Going to the DOM
function completeWork(current, workInProgress, renderLanes) {
const newProps = workInProgress.pendingProps
//…
switch (workInProgress.tag) {
//…
case HostComponent: {
const instance = createInstance(type, newProps, rootContainerInstance,
currentHostContext, workInProgress);
//…
workInProgress.stateNode = instance;
}
}
}
DOM element

33. beginWork
Determine the
component
Run our code
Diffing
algorithm
Update DOM
Setting initial
properties
Events
We are here

34. Set initial properties
<h1>My React Component</h1>

35. Set initial properties
<h1>My React Component</h1>

36. Set initial properties - Children

37. beginWork
Determine the
component
Run our code
Diffing
algorithm
Update DOM
Setting initial
properties
We are here
Events

38. <button onClick={() =>
setCount((count) =>
count + 1)}>{count}
</button>
Now, let’s head for events

39. Find the right listener

40. Find the right event listener

41. Dispatch found listener found
const evtType = "react-" + (name ? name :
'invokeguardedcallback');
fakeNode.addEventListener(evtType,
callCallback, false)

42. callCallback

43. Setting state

44. beginWork
Determine the
component
Run our code
Diffing algorithm
Update DOM
Setting initial
properties
We are here
Events

45. Find the differences

46. Find the differences

47. Getting properties
by the tag

48. Compare

49. Mark for update

50. beginWork
Determine the
component
Run our code
Diffing algorithm
Update DOM
Setting initial
properties
We are here
Events

51. Updating the DOM
On commitMutationEffectsOnFiber

52. Updating the DOM
The call stack

53. Updating the DOM
And finally

54. Let’s wrap

55. Thank you!
Ran Wahle
ran.wahle@gmail.com
ranw@tikalk.com
@ranwahle