Back To Basics: Rewind, React!
As I go through the motions of post graduation job searching, I wanted to go back to the basics as a way to solidify my knowledge on everything I learned in the past four months. In this series that I have titled as “Back To Basics”, I take a look at broad topics and break it down to its core. Maybe it can help another fellow programmer going through a boot camp or a refresher for anyone who needs it.
What is React?
Ripped straight from the official docs:
React is used to build user interfaces. It is UI library and a tool for building UI components. We tell React how we want each component of our UI should look, update, and render. That is why we say that React is declarative. It introduces the concept of a virtual DOM. When we write code with React we do not directly change what is on the screen. We instead manipulate the virtual DOM. Lets break this concept down!
Virtual DOM & The Process of Reconciliation
So why does React makes us interact with a virtual DOM and not the real one?
Well, DOM manipulation is slow. Frequently making changes and updating the DOM affects performance. Lets look at the DOM hierarchy.
THE DOM TREE
The DOM’s hierarchy is organized as a tree structure as seen in the picture. All elements and objects are represented as nodes. Each of those nodes have their own properties and methods attached to them. Nodes can have a parent node and also many child nodes.
When we change an element, the DOM will update that element but will also re-render all of its children.
A web page can be complex and consist of many UI components. So the process of re-rendering more and more components can be so extremely slow.
Most web pages are dynamic Single Page Application which contain thousands and thousands of
<div>s and so many event handlers tied to them. Imagine scouring through all those <div>s to find the element you need to update. And on top of that, go through all its children to re-render them. That’s not only hard to manage when it comes to debugging but it is also time-consuming and inefficient. That’s where the virtual DOM comes in!
The Virtual DOM
The virtual DOM is only a representation of the actual DOM, the UI that is kept in memory. It has the same properties as the real DOM but it does not have the power to change what’s directly on the seen. So you can think of it as a light weight copy of the real DOM.
The process that React uses to make changes to the real DOM is called reconciliation.
When a render elements in React, a virtual representation of that tree of react elements will be kept in memory. When the react component’s state changes or a new element is added, a new version of the virtual DOM with the necessary updates. React will then dig up an old version of the virtual DOM that it kept in memory. From there React uses the diffing algorithm to compare the new version and the snapshot.
The Diffing Algorithm
“Diffing” refers to the process of checking the difference between the to version of the virtual DOM.
React does this by implementing a heuristic O(n) algorithm. (Time Complexity bonus fact!).
It does so based on two assumptions. In the React docs, it states:
1. Two elements of different types will produce different trees.
2. The developer can hint at which child elements may be stable across different
renders with a
Now the behavior can vary depending on the type of root elements. If you are interested, you can read more about it here!
By computing the difference, React pin points what sub-trees need to be updated in the actual DOM. React will make changes to only those sub-trees on the real DOM. That is why it is faster and more efficient. Updating the virtual DOM is instant and React reduces the timely process of DOM manipulation by limiting DOM updates to certain number of objects. Thus, performance is significantly better.
Every component receives a list of attributes that we refer to as props. They can be passed down to other components as its first argument. It essentially an object filled with attributes and corresponding values.
There are two types of components: function and class components.
Function components are defined as:
Class components are defined slightly different. One glaring difference is the
render() function. Never forget to render before you return!
So which one do I use? Well, if a component needs to keep track of its data (aka state), then it must be defined as a class components. Functional components cannot handle state and does not have access to React Life Cycle methods.
If state does not matter, you should use functional components as they are easier to read and test. However, in React 16.8, the React Team introduced the world to React Hooks. They allow functional components have the same power as class components without writing them! It’s definitely becoming more popular but I will talk about it more in a future article since I am in process of learning it :)
React + JSX
In the examples above, that header tag
<h1> Welcome! </h1> is actually
React.createElement(“h1”, null, “ Welcome! “). We can avoid writing
React.createElement() over and over again by using JSX and translating it after.