This week in The Curious Case of React - #4
This issue talks about the virtual DOM along with touching upon the JSX syntax.
🌏 Navigating the React World (#3)
Hi! I'm back with another edition of The Curious case of React 🎉.
Previously, I told you why React was a breeze to work with from a developer standpoint, (Recap: It being really easy to debug & to be able to easily visualize the flow of data) in this issue I want to highlight why it is a great choice if you care about performance. Additionally, I will give a sneak peek into the world of JSX and why it's a powerful idea.
DOM
The document object model or DOM in short, if you aren't already familiar is an abstraction of the HTML text being rendered by a browser in the form of a tree-like structure which developers can use to manipulate the elements shown in a browser.
As an example, if you want to insert a text inside an element based on its id
dynamically then a snippet like the one below would help you do just that using the DOM.
let el = document.getElementById('id');
el.innerHTML = 'Test';
The Virtual DOM
The virtual DOM is a concept that allows incremental updates to the DOM if and only if there is an actual update on the UI.
Imagine the snippet above which inserted text inside an element to be run in a while loop 10 times in the browser. For the first run of the iteration, the element would have no text inside before the code is executed, and immediately after, the element would have the text Test
. For the next 9 iterations, the execution is redundant since the element already has the text within however the browser does not know this and the DOM will be manipulated each time causing the browser to re-render each time as well.🤮
Performance-wise this is not efficient, to say the least. With a large enough DOM and a complex web-app, this can cause serious performance-issues and sluggishness for the users of your web apps.
Having a virtual DOM eliminates this issue. The way that it is implemented in React is to have an abstraction or a copy of the DOM (Yes abstraction of an abstraction!) and we as React developers only manipulate the React Elements without actually touching the DOM.
💡 Golden rule: Do not touch the DOM in a React app. EVER.
React internally reconciles the actual DOM with the virtual copy and looks for any updates that need to be made by a diff-ing mechanism similar to the one used in Git
and only makes them if necessary. So the DOM is updated only if it needs to.
In a React app if we try to update the text inside an element 10 times in a loop only the first iteration does an actual update to the DOM and the next 9 are no-op. This alone has insane performance improvements. 🔥
JSX
We looked at how a virtual DOM gives performance gains but we did not yet talk about how to actually implement a React Element which does this.
JSX
is an extension to Javascript with which we write React apps. Don't worry it is not a different language so you can do absolutely everything in JSX
as you can in JS but a little bit more as well.
Previously web apps used to have three different folders and files for CSS, JS, and HTML all working on the same DOM. While this is a good idea (Separation of concerns) in general, JSX introduces the same idea differently.
The "concerns" JSX separates are individual UI elements into something called Components with the HTML, Styling, and behavior (JS), possibly, all in the same file. The idea is to encapsulate all the information needed by that component together and use other components together to form larger components. (Composability)
const element = <h1>Hello, world!</h1>;
Each component may have some state (basically data) which when updated, updates the UI as well after going through the Virtual Dom reconciliation phase.
class ElementWithDynamicText extends React.Component {
constructor() {
super();
this.state = {text: "Test"};
}
render() {
return <h2>{this.state.text}</h2>;
}
}
To sum it up, JSX keeps the relevant parts of the UI close to itself instead of spreading it across three files. I suggest you learn more about the syntax here.
Thanks for reading!. If you liked what you read let me know! Better yet share it with a pal would find this series useful.
Next, I will talk all about State management and the different ways you can handle it in React concluding the Navigating the React world sub-series.
Follow me on Twitter for anything related to tech, startups, and building products.