DEV Community: Puja Kundu

Improving React App Performance with Lazy Loading

Puja Kundu — Fri, 21 Apr 2023 16:54:19 +0000

When building React applications, it's important to consider performance. Slow applications can have a negative impact on user experience, specially on slower internet connections. One technique for improving performance is lazy loading.
According to the official documentation of React JS

lazy lets you defer loading component’s code until it is rendered for the first time.
const SomeComponent = lazy(load)

Why and When to Use Lazy Loading

Lazy loading can provide a number of benefits for your React application. By deferring or postponing the loading of non-critical components, one can reduce the initial bundle size and improve the time-to-interactive (a metric used to measure how long it takes for a web page to become fully interactive for the user).

It is an effective technique to use when you have large or infrequently used components in your React application. For example, in a multi-step form with multiple sections, instead of loading all the code for each section upfront, you can use lazy loading to load each section's code only when the user needs it. This helps to reduce the initial load time of the application.

How to Use Lazy Loading in React

To use lazy loading in React, you can use the lazy(load) function and the Suspense component.

lazy takes a parameter load which is a function that returns a promise. React will not execute the load function until the first time the returned component is rendered. Once React calls the load function, it will wait for it to resolve and then render the resolved value as a React component.

Here's an example of how you might use lazy loading to defer the loading of a component called MyComponent:

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

In this example, the lazy() function is used to import the MyComponent module lazily, so that its code is only loaded when it's actually needed. The Suspense component is used to display a fallback UI while the code is being loaded. In this case, the fallback UI is simply the text "Loading...".

Disadvantages of Using Lazy Loading

While lazy loading can provide significant performance benefits, it's important to use it judiciously and avoid overloading the browser with too many lazy-loaded components. Here are some potential disadvantages to consider:

Increased complexity: Lazy loading adds an additional layer of complexity to your codebase, which can make it harder to understand and maintain.
Delayed rendering: Because the code for lazy-loaded components is not loaded until it's needed, there may be a delay in rendering those components. This can result in a slower initial load time for the component.
Poor user experience on slow connections: If a user is on a slow internet connection, lazy loading may result in a poor user experience, as components may take longer to load and render.

Conclusion

Lazy loading is a powerful technique for improving the performance of your React applications. Using it can lead to a faster and more responsive application and improve user experience. However, it's important to weigh the potential advantages and disadvantages of lazy loading to avoid overloading the browser with too many lazy-loaded components.

References

lazy

A brief intro to JS Promises

Puja Kundu — Wed, 12 Oct 2022 14:33:34 +0000

A JS Promise is an object that represents the completion or failure of an asynchronous operation and gives results.

Syntax

The syntax for writing a promise by using the ‘new’ keyword and promise constructor function.
const myPromise = new Promise();
A promise has three states. That is -

Pending
Resolved
Rejected

Pending: When the state is ‘Pending’, it means the operation has neither been resolved nor rejected. Pending is the initial state, and the initial result is undefined.
Resolved: When the state is ‘Resolved’, it means the operation has been completed successfully and will give a result.
Rejected: When the state is ‘Rejected’, it means the operation has not been completed successfully and will give an error.

How to reject or fulfill a promise?

For instance, you have an API where there is information such as product id, name, price, etc is stored. You make an API call. When you are making the API call, initially the state is pending and the promise has neither been resolved nor rejected. Now you want to show the data which in this case are the product pieces of information on the UI, and if any error occurs you want to show an error message.

React Higher Order Component

Puja Kundu — Wed, 10 Aug 2022 18:48:21 +0000

What is a Higher Order Component in React?

Higher order component is a function that takes a component as a parameter and returns an enhanced or changed component. Higher Order Component (HOC) adds additional data or functionality to the original component and returns an enhanced version of it.
A HOC does not modify the original component. It takes the original component and wraps it in a container component. The wrapped component receives data and returns output according to the received data. A HOC is a pure function.

Why use a Higher Order Component?

HOC is used to share common functionalities between components
It helps to reduce code duplication
Makes code manageable

Example

Let’s make a simple React application that will count the number of times you click on a button and hover on a text.

In your React app, create a folder named HOC. Inside the HOC folder, we will create a new file named ‘withCounter.js’. ‘withCounter.js’ is a Higher Order Component. ‘withCounter.js’ will contain the logic we need to build the counter system.
Now, create another folder named ‘components’. Inside this folder create a component named ClickCounter.js.

import React from "react";

class ClickCounter extends React.Component {

  render() {

    return (
      <div>
        <button>Click me</button>
        <p>Clicked X times</p>
      </div>
    );
  }
}

export default ClickCounter;

Inside the same folder create another component named HoverCounter.js

import React from "react";

class HoverCounter extends React.Component {

  render() {

    return (
      <div>
        <h1>Hovered X times</h1>
      </div>
    );
  }
}

export default HoverCounter;

As you can see in both the ClickCounter and HoverCounter components we have to create a state which will be increased by one each time we click the button or hover over a text. So let's write the logic to implement this functionality.

 constructor(props) {
            super(props)
            this.state = {
                count:0
            }
        }

        incrementCount = () => {
            this.setState(prevState => {
                return {count: prevState.count + 1}
            })
        }

Here, the initial state of count is set to zero and incrementCount will increment the value of count by 1.
Now, one way to make the components work is by adding the above piece of code in both the components and trigger incrementCount on button click in ClickCounter and on mouse hover on HoverCounter.
Another way is by using a Higher Order Component where we can put the count and incrementCount and then pass them down as props to ClickCounter and HoverCounter.
To do that let's open our withCounter.js file and write some code.

import React from 'react'

const UpdatedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component{
        constructor(props) {
            super(props)
            this.state = {
                count:0
            }
        }

        incrementCount = () => {
            this.setState(prevState => {
                return {count: prevState.count + 1}
            })
        }
        render(){
            return <OriginalComponent count={this.state.count} incrementCount={this.incrementCount } />
        }
    }
    return NewComponent
}

export default UpdatedComponent

In this HOC, UpdatedComponent is an arrow function that takes OriginalComponent as a parameter. In our case, we will send ClickCounter and HoverCounter as the OriginalComponent parameter.
In this HOC, we are passing down count and incrementCount down as props in the OriginalComponent. Finally, we return NewComponent which, we can call an enhanced version of the OriginalComponent.

Now we will send ClickCounter and HoverCounter as parameters to the HOC withCounter.js. So, ClickCounter.js will be -

import React from "react";

import UpdatedComponent from "../HOC/withCounter";

class ClickCounter extends React.Component {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <button onClick={incrementCount}>Click me</button>
        <p>Hovered {count} times</p>
      </div>
    );
  }
}

export default UpdatedComponent(ClickCounter);

And, HoverCounter.js will be


import React from 'react'
import UpdatedComponent from "../HOC/withCounter";

class HoverCounter extends React.Component  {
  render() {
    const { count, incrementCount } = this.props;
    return (
      <div>
        <h1 onMouseOver={incrementCount}>Hovered {count} times</h1>
      </div>
    );
  }

};

export default UpdatedComponent(HoverCounter);

And, the final output is,

Now, in this example, we can also solve the problem by lifting the state up to a common parent component. But in a larger application, if the counter components ClickCounter.js and HoverCounter.js are scattered, lifting state would not be the correct solution. In cases like this, we can use a Higher Order Component.
So, this is how a Higher Order Component works.
Thank You!!

JavaScript(ES6) Symbols

Puja Kundu — Tue, 21 Jun 2022 11:58:46 +0000

What is symbol in JavaScript?

Symbol is a primitive data type that is unique and immutable. Every symbol has a hidden unique value. It is usually used to avoid name conflicts between object properties, and keys.

Syntax

Unlike other primitve data types, we can not create symbol with new keyword because symbol is not a constructor function. We can create a symbol by using the factory function Symbol(). It returns a unique symbol every time it is called.
var symbol = Symbol();
We can also add description to symbols. Symbol description does not have any functional value. They are used for debugging purpose, to differentiate between symbols.

var symbol1 = Symbol();//Symbol with no description
var symbol2 = Symbol('Symbol description');//Symbol with description

Symbols are unique

Every time we create a new symbol in JavaScript, they return a unique value. Even though we get same output when we console.log symbol1 and symbol2, when we check if symbol1 is equal to symbol2 it returns false.

Symbol.for()

Symbol.for(key) is an inbuilt method in JavaScript. It searches for existing symbols in runtime-wide registry with the given key and returns it. If it is not found, it creates a new symbol with the given key. The key can also be used as the description of the symbol.

Why use Symbols?

We can use symbols as object properties

We can use symbols to avoid over writing object properties Say we have an object blackWidow with id and name properties.

As we can see the value of id property is changed. What if we don’t want to change the actual value of id we can add symbol in the object.

Symbols are hidden in loops and js functions. We can use them to keep any unique or identifier property hidden.

What is React Virtual DOM

Puja Kundu — Wed, 20 Apr 2022 17:35:52 +0000

What is DOM?

Document Object Model or simply DOM is an Application Programming Interface(API) for HTML and XML documents. When a browser receives an HTML file, it parses it and builds a DOM tree. HTML elements are considered nodes in a DOM tree.

What is Virtual DOM?

Virtual DOM or VDOM is a virtual representation of the real DOM. It has the same properties as the real DOM but it can not directly change what’s on the screen. React uses virtual DOM. Why? We will get into that now.

Is the real DOM really slow?

What is the first thing that comes to your mind when anybody asks why React uses Virtual DOM? What’s wrong with using the real DOM? - Well, it’s because the real DOM is really slow.

Is it though?

Adding or removing any element from DOM is actually pretty fast. Then why is it called slow?
When we change something in a React component, that change has to be shown on the screen. The process of showing the changes in the UI is slow.

Upon receiving an HTML file, the browser render engine parses it and makes a DOM tree. In the same way, the styles in the CSS file are parsed into CSSOM. Both DOM and CSSOM make a render tree. The render tree has to go through a phase called Layout .
In the Layout phase, the coordinates of the elements of a render tree are found. The coordinates are used to determine the exact position where the elements will be shown on the screen. Lastly, in the Painting phase, the elements are displayed on the screen. When we make any changes in a DOM, the browser has to build the render tree all over again. This repainting process is slow.

How virtual DOM works

Virtual DOM represents the same DOM elements. When we make any change in a react component, every single virtual DOM gets updated. Before updating the VDOM, a snapshot is taken. This snapshot is then compared to the updated virtual DOM to figure out which VDOM object has changed. This process is called diffing. When react knows which object has changed, it updates only those objects in the real dom. These changes in the real DOM cause the screen to change.

Build a Rock-Paper-Scissors-Lizard-Spock game

Puja Kundu — Tue, 08 Feb 2022 12:47:32 +0000

If you are familiar with Big Bang Theory, you must have heard about the Rock-Paper-Scissors-Lizard-Spock game. As Sheldon explains, "Scissors cuts paper, paper covers rock, rock crushes lizard, lizard poisons Spock, Spock smashes scissors, scissors decapitates lizard, lizard eats paper, paper disproves Spock, Spock vaporizes rock, and as it always has, rock crushes scissors."

Let's build this game with some HTML, CSS, and JavaScript.

First, create an index.html file and write some code.

Create a container to hold the title and score.

<div class="scoreboard">
        <div class="title">
          <h2>ROCK</h2>
          <h2>PAPER</h2>
          <h2>SCISSORS</h2>
          <h2>LIZARD</h2>
          <h2>SPOCK</h2>
        </div>
        <div class="score">
          <p>SCORE</p>
          <h1>0</h1>
        </div>
</div>

Create another container to hold your rock, paper, scissors, lizard, and spock. Add click event pickUserOption() on each image and pass parameters.

<div class="options">
        <div class="option spock">
          <img src="/images/Spock.png" onclick="pickUserOption('spock')" />
        </div>
        <div class="option scissors">
          <img
            src="/images/Scissors.png"
            onclick="pickUserOption('scissors')"
          />
        </div>
        <div class="option paper">
          <img src="/images/Paper.png" onclick="pickUserOption('paper')" />
        </div>
        <div class="option lizard">
          <img src="/images/Lizard.jpg" onclick="pickUserOption('lizard')" />
        </div>
        <div class="option rock">
          <img src="/images/Rock.png" onclick="pickUserOption('rock')" />
        </div>
</div>

Finally, show the results and play again button.

 <div class="contest">
        <div class="useroption">
          <h1>YOU PICKED</h1>
          <div class="optionImageContainer">
            <img id="userPickImage" src="/images/Paper.png" />
          </div>
        </div>
        <div class="result">
          <div class="decision"><h1>YOU WIN!</h1></div>
          <div class="newGame" onclick="playAgainBtn()">PLAY AGAIN</div>
        </div>
        <div class="computeroption">
          <h1>THE HOUSE PICKED</h1>
          <div class="optionImageContainer">
            <img id="computerPickImage" src="/images/Paper.png" />
          </div>
        </div>
</div>

Now, create your main.js file.

First, let's add some fun sound effects and store image directories.

const clickSound = new Audio("/audio/mixkit-select-click-1109.wav");
const winSound = new Audio("/audio/mixkit-winning-notification-2018.wav");
const loseSound = new Audio("/audio/mixkit-losing-piano-2024.wav");

const userOptions = {
  rock: "/images/Rock.png",
  paper: "/images/Paper.png",
  scissors: "/images/Scissors.png",
  lizard: "/images/Lizard.jpg",
  spock: "/images/Spock.png",
};

Write pickUserOption() function that is called when you choose your option.

const pickUserOption = (option) => {
  let options = document.querySelector(".options");
  options.style.display = "none";

  let contest = document.querySelector(".contest");
  contest.style.display = "flex";

  clickSound.play();
  document.getElementById("userPickImage").src = userOptions[option];

  pickComputeroption(option);
};

It's time for the Computer to pick its option. We generate some random number for the Computer to pick.

const pickComputeroption = (option) => {
  let options = ["rock", "paper", "scissors", "lizard", "spock"];
  let computerOption = options[Math.floor(Math.random() * 5)];

  // set computer image
  document.getElementById("computerPickImage").src =
    userOptions[computerOption];

  result(option, computerOption);
};

Add a play again button, setDecision() function to show results and setScore() function to update the score each time you win.

const playAgainBtn = () => {
  let contest = document.querySelector(".contest");
  contest.style.display = "none";

  let options = document.querySelector(".options");
  options.style.display = "flex";
};

const setDecision = (decision) => {
  document.querySelector(".decision h1").innerText = decision;
};

const setScore = (newScore) => {
  SCORE = newScore;
  document.querySelector(".score h1").innerText = newScore;
};

Write another function that determines your fate, I mean the game results. It contains a bunch of if-else statements.🥱

const result = (userOption, computerOption) => {
  if (
    (userOption == "paper" && computerOption == "scissors") ||
    (userOption == "paper" && computerOption == "lizard")
  ) {
    setDecision("YOU LOSE!");
    playSound("lose");
  }
  if (
    (userOption == "paper" && computerOption == "rock") ||
    (userOption == "paper" && computerOption == "spock")
  ) {
    setDecision("YOU WIN!");
    setScore(SCORE + 1);
    playSound(win);
  }
  if (userOption == "paper" && computerOption == "paper") {
    setDecision("It's a tie!");
    playSound("tie");
  }
..............
..............
}

Last add another function to add some sound effects.

const playSound = (result) => {
  if (result == "win") {
    winSound.play();
  } else {
    loseSound.play();
  }

Finally, write some CSS and add styling as per your likings.😊

This is a FrontendMentor.io challenge. You can complete it here
See the full code here

Thank you!!

JavaScript Hoisting

Puja Kundu — Fri, 23 Jul 2021 09:47:51 +0000

Hoisting is a default behaviour of JavaScript. It moves the declaration of variables and functions to the top of the current scope (script or function). In that way, a variable can be declared after it has been used and a function can be called before it is even written .
For example , the given code will not show any error ,by default var x will be moved before x = 20.

x = 20; console.log(x); var x;

Output: 20

But this will only work if we use the var keyword.

Only declarations are hoisted , not initializations:

Example :

var x = 5;//Initialize x console.log(`The values of x and y are: ${x} and ${y}`); var y = 9;//Initialize y , won’t be hoisted

Output : The values of x and y are: 5 and undefined

The ‘let’ and ‘const’ keyword :

The variables declared with let and const keyword are hoisted to the top but will not work because they are not initialized.

The let keyword will cause ReferenceError :

Reference Error occurs when a non-existent variable is referenced. The variable declared with 'let' keyword will be considered non-existent until it is declared.

Example :

y = 10; console.log(y); let y;

Output : ReferenceError: Cannot access 'y' before initialization

The const keyword will cause SyntaxError :

Using the 'const' keyword is considered as Syntax Error. So the code will not run.

Example :

y = 10; console.log(y); const y;

Output : SyntaxError: Missing initializer in const declaration