Introduction
React allows us to write Components that automatically update and re-render once the data of the component changes. In this blog post, I will briefly introduce how React archives this.
Hopefully, this blog post will answer the question:
"What happens when I update my component state?"
Counter Example
Let's take a look at an exemplary "component".
Notice that this example does not use any build-step. Instead, we import the required libraries (React, ReactDOM, and Babel) directly inside the browser. I'm doing this because I don't want any framework "magic" to hide what is happening here.
<html lang="en">
<head>
<title>Home</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone@7.22.10/babel.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-presets="env,react">
function Counter() {
const [count, setCount] = React.useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
)
}
const reactElement = React.createElement(Counter)
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(reactElement)
</script>
</body>
</html>
It is a simple counter that displays the current count and allows the user to increase or decrease it.
There are three parts to this example:
- First, the
Counterfunction returns JSX and stores the count value. I will now refer to this function as "Component" as this is the language that people are most familiar with. - Then, we create a ReactElement using the
createElementfunction. - After that, we use ReactDOM to render the ReactElement.
When the user presses the (+)-Button, we can observe that the DOM updates and the new count is displayed.
What happens when you update a state variable
When a user clicks the (+)-Button, we'll call the setCount function to update the count state. Updating the count state will trigger React to call the Counter component.
The process of React calling the Counter component is often referred to as "rendering". Each time we update the state within our component, React will "render" the component.
It is essential to understand that calling the Counter function does not update the DOM. That part gets handled by ReactDOM.
Modifying the DOM
Updating the DOM is slow, that's why ReactDOM will decide which parts of the DOM need to be modified by comparing the old JSX that our Counter component returned with the new JSX.
Before:
<div>
<p>Count: 0</p>
</div>
After:
<div>
<p>Count: 1</p>
</div>
The process of finding the minimum number of changes that must be made to the DOM is called Reconciliation.
In our case this is pretty simple, React just has to update the number within the P-Tag. Note that it will not update the whole component, just the elements that need to be changed.
Top comments (0)