React jargons explained

Published On: 20th Jul, 2023

Read Time: 6 mins

React is a library that is used to create user interfaces on the web. It's arguably easy to undestand and you can get started with it really quickly. Once you dive deeper into React chances are that you might come across terms like Render Phase, Commit Phase, Pure Components and you go burr... 🤯

So today, let's get ourselves familiar with some of those jargons with the help of some code. Let's start from the basics -

JSX (Javascript XML)

JSX stands for Javascript XML (it's TSX - Typescript XML for typescript). It is a HTML like syntax extension to javascript that is used by React to define the structure and the content of a React Component. JSX combines the HTML and the power of JavaScript to create dynamic and interactive user interfaces. JSX cannot be really by the browser directly, so it needs to be transpiled into plain javascript by using tools like Babel.

<div>
  <h3>Hey {name}!, What's up</h3>
  <p>Don't have a good day, Have a Grrreat Day</p>
</div>

Component

A component is a reusable, self-contained piece of UI that can be composed together to build a user interface. React applications are typically built by creating and combining components. The well-known examples of the component can be a footer, header, button, etc. Following is the example code of a card that shows the card along with its title, images and description.

const Card = () => {
  return (
    <div className="card">
      <h4 className="card-title">This is card title</h4>
      <img
        className="card-image"
        src="/link-to-image"
        alt="a-beautiful-image"
      />
      <p className="card-description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, quisquam
        blanditiis.
      </p>
    </div>
  );
};

State

In React, State represents the data that is managed within a component. It can be changed over time, and when the state changes, React re-renders (will see renders later) the component to reflect the updated state. React has its own way to declare a state that is useState hook (will see hooks later). Below is the example that creates a state called count and whenever the count changes React will re-render this component.

import { useState } from "React";

const Counter = () => {
  const [count, setCount] = useState();

  return (
    <div>
      <h3>Count is: {count}</h3>
      <button onClick={(e) => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={(e) => setCount((prev) => prev - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

Props

Props (short for properties) are inputs passed to a component from it's parent component where its being called/rendered. Props allow the parent component to customize the behavior or appearance of a child component. Props are passed as attributes to React components when they are being used in JSX. The parent component supplies the values for these props, and the child component can access and use them within its own logic or rendering. Props are read-only, meaning that the child component cannot modify them directly.

// component that takes a title prop
const Heading = (props) => {
  return (
    <header>
      <h3>{props.title}</h3>
    </header>
  );
};

export default Counter;

// pass the title prop just as an attribute
<Heading title="Hello there!">

Virtual Dom

The Virtual DOM (Document Object Model) is a lightweight, in-memory representation of the actual browser DOM. It is a tree-like structure that is a replica of the actual DOM. React uses the Virtual DOM to keep track of the current state of the UI and update only the necessary parts of the actual DOM when changes occur. Whenever a state change is triggered React creates a new copy of the Virtual DOM of that change and then compares that to the previous version of the Virtual DOM, and if there are any differences between these two versions it will make the changes in the actual DOM.

Reconciliation

Reconciliation in React refers to the process of comparing the previous Virtual DOM tree with a new Virtual DOM tree and verifying the set of changes needed to update the actual browser DOM. This whole process is divided into mainly two steps -

1. Render Phase

2. Commit Phase

Let's take a quick look at these two phases

1. Render Phase

The Render phase is the first of the two phases in React rendering mechanism, render phase can be divided into two types, one when React is rendering the app for the first time and the other when there is a re-render because of the state change. Render phase works in the following steps -

React will take your JSX code and will create its plain javascript tree-like representation this is called a Virtual DOM.
React will now compare this tree to the previous version of virtual dom using an algorithm and will calculate the diff (in the case of the very first render phase it won't look for diff).
Once the diff is there React will actually starts making the changes to the actual browser DOM that is Commit Phase.

2. Commit Phase

The Commit phase is the very next phase after the Render phase. After getting the diff from the render phase using its algorithm React will actually start making the changes to the actual browser DOM using various DOM APIs such as appenchild, etc. This phase may include the things like adding, removing or updating the DOM elements and their attributes. Here we need to understand that React only changes the DOM nodes if there’s a difference between renders. Once the commit phase is completed React will start painting the UI to the changes.

Councurrency

This term was introduced in React 18. Concurrency in React is the ability of React to perform multiple tasks simultaneously without blocking the main user interface thread. It enables React to handle asynchronous operations and maintain a responsive user interface. Before to the introduction of concurrency in React, performing expensive or time-consuming tasks such as rendering heavy components could block the main thread, leading to unresponsive user interfaces and poor user experience. Concurrency in React solves this issue by allowing React to work on multiple tasks concurrently, keeping the UI responsive even during resource-intensive, heavy tasks.

Purity

Purity is not specific to React rather it's a programming paradigm, pure functions are the functions that always produce the same output for the same input, and they do not have any side effects. In other words, pure functions solely depend on their input parameters and have no impact on the external environment. In React, Pure Components mean the component that re-renders only when its props or state have changed compared to the previous values. Pure components give the same output for the same set of props. let's see the examples of both pure and impure components

// Pure Component
const Greet = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// Impure Component
const Time = ({ name }) => {
  const [currentTime, setCurrentTime] = useState(new Date());

  return <h1>Current Time: {currentTime.toLocaleTimeString()}</h1>;
};

That's all for now, all of the terms mentioned above desrves their own blog since there are lots of interesting things that we can look into. I will try cover each of those individually soon, till then keep learning, keep growing 🤘.