How React reacts: understanding the flow of React

An overview

React is the most widely used library in web development and many new developers start learning react everyday. In this article we'll go through some topics that a react developer should know, and learn about the flow of react.

What is React?

React is a JavaScript library that is used to create user interfaces. React is the most popular front-end library to build user interfaces today. It allows us to easily write more efficient and better quality code to create user interfaces using a declarative programming style.

What is declarative programming?

When it comes to programming, a language can follow one of the two programming styles, declarative or imperative.

• In Imperative Programming, we define the entire control flow for the compiler including the exact steps that it should follow to get what we want as the end result. We follow this style in Vanilla JavaScript, jQuery, etc.

• In Declarative Programming, we only tell the compiler what we want as the end result, it is upon the compiler to decide its control flow and the steps it should take to get to the end result. We flow this style in React as in React we only define what the user interface should look like and not the control flow for the compiler to follow to make the user interface look like that.

Example:

Let's consider a classic Bruce Wayne and his infamous Alfred the Butler example to understand these programming styles in a more comprehensive way. Bruce Wayne is the programmer, and Alfred is the compiler. Here Bruce Wayne is hungry and he wants a Pizza with pineapple toppings.

In declarative style:

Bruce Wayne: I want a Pizza with pineapple toppings
Alfred: ready with a Pizza with pineapple toppings.

In imperative style:

Bruce Wayne:
Go to the kitchen.
Open a shelve.
Get some all-purpose flour.
Get some water.
Get some yeast.
.....
Alfred: ready with a Pizza with pineapple toppings.

Components

In react, the global user interface is made up of several smaller user interfaces, known as components. Components are the independent building blocks of user interface in react, and the reason we follow component-based approach in react is for better manageability and reusability of code. For example, suppose your building a web app which has 5 different pages, the content on each pages would be completely different but all the pages may have some common components, for example, a navbar. We could opt for either one of the two approaches here, we could either write code for a navbar and copy-paste it on every page and have a navbar on all our pages. This would surely not harm anyone, and it is also the second more recommended approach of the two approaches we have. But it is still recommended to follow the component based approach. Why? Because we follow something known as the Don't Repeat Yourself, or DRY, approach in programming. In the example above, we wouldn't only have just written the same code five times over, but also if we need to make some changes in navbar, we would have to make changes in all of the pages. Yes, we would have to make the same changes at five different places. In the second approach, we could create a navbar component and put it in all our pages, and whenever we need to make any change in navbar, we do it in the main component code block and it is reflected in all our pages. Sounds so much better and so much less hectic, right?

States and Props

All components in a React app have two things that defines how they look, states and props.

State

State is a built-in React object. Every component in React has a global state which is a representation of the component's current state, or data. A component consists of multiple states representing different set of data. For example, suppose we are building an app in which there is a button component, that button is used to toggle an action, and depending on whether the toggle is on or off, the color of the button changes. Toggle is basically a state of this component that decides what the button would look like. This toggle state would be available as a property in the global state of this component.

• State can be modified because they originate from within the component itself.

Props

Props is short for properties. You may think of them as arguments and components as functions. Props are the data that an upper level component has and it is passed to a lower level component because the lower level component needs it to render in the defined way.

• Props are read only. If you want a child component to be able to modify a prop, you would also have to pass a function, with the ability to modify the prop, from the parent component to the child component.
• Props can only be passed from a component of upper hierarchy to lower hierarchy. By hierarchy here, I mean the level they are at in the DOM Tree.

JSX

Components in react are built using JavaScript XML, or JSX. JSX is a syntactic sugar and it allows us to write code that resemble HTML in react. We write code in react using JSX like this.

    <div>
      <p>This is para text</p>
    </div>

Element

Elements in react are plain object representation of components or DOM nodes. Elements are immutable in react and once created they can't be modified.
The JSX we wrote above would return an element which would look like this.

  type: "div";
  key: null;
  ref: null;
  props: 
      children: 
          type: "p";
          key: null;
          ref: null;
          props: 
              children: "This is para text";

Virtual DOM and Reconciliation

Virtual DOM, or VDOM, is a virtual representation of the Actual DOM, or DOM, which is stored in react's memory and is synced with the DOM using a library like ReactDOM. DOM is handled by browsers whereas VDOM is handler by frameworks and libraries like React, Vue, Elm etc. Both VDOM and DOM are generally represented in a tree-like structure which you have probably seen many times already.

Why VDOM when we have DOM?

Most common answer that you would find to this question is because VDOM is faster than the DOM, which is not entirely true. VDOM and DOM are two different technologies which handle different use cases. DOM is directly responsible for what you see on the screen, VDOM is not. VDOM is merely an object representation of DOM. When there is a change made in a react app, react reflects the change on the VDOM which is then compared to an earlier frame of the newly created VDOM using an algorithm called diffing, this algorithm let react know exactly what node in the VDOM has changed. React then proceed to change only those nodes in DOM which were affected by the change and doesn't unnecessarily re-render the entire DOM. You see, VDOM itself uses DOM is make changes in the UI, VDOM is not DOM 2.0. In fact, VDOM can actually be considered more expensive because of diffing and creation of a new VDOM every time something is changed. But VDOM is still used because there is no way for us to know in advance what nodes would be changed and in what way, and without being aware of this, our only resort would to be re-create the entire DOM every time something has changed, which is very expensive. This entire process of react registering a change, creating a new VDOM, comparing it with an older version of VDOM, figuring out the nodes it has to replace with newer ones, and then making those changes on the DOM is called Reconciliation. Reconciliation happens every time the render function is called, and the render function is called every time a change is registered in a react app.

Conclusion

We have reached the end going through almost all the topics that a beginner should know. I would personally recommend learning more about diffing if possible to have a better understanding on what counts as a change in react. I would love to hear feedbacks on this.