DEV Community: Uttam

What is Virtual DOM and How does It Works?

Uttam — Mon, 31 Mar 2025 07:10:32 +0000

Introduction

In modern web development, performance and efficiency are critical part when creating user interface. Virtual DOM is one of the key innovations which make framework like React fast and efficient. But what is exactly virtual DOM?. How does it works. Let's understand in detail in this blog.

What is Virtual DOM?

The DOM (Document object model) represent the structure of the webpage as tree elements. when any changes made in the UI the browser update the DOM, which can be slow and inefficient specially If the application is large.
To solve this problem Virtual DOM was introduced which is abstract representation of DOM. when any changes made in the UI instead of modifying directly real DOM. changes first apply to Virtual DOM only necessary changes are made to real DOM which improve the performance.

How does Virtual DOM works?

The Virtual DOM follows three-steps process to efficiently update the UI.

1. Rendering the Virtual DOM

When a React component renders, a Virtual DOM created.
This is light weight copy of actual DOM, but this exist only in memory.

2. Comparing the Changes

when the application state changes. a new Virtual dom is generated.
React compares the changes with previous one using a process called as Reconciliation.
It check what part of UI is changed.

3. Updating the real DOM

React applies only necessary update to real DOM instead of updating the entire UI.
This reduce the performance issue and make the rendering faster.

Why virtual DOM is faster?

Instead of making multiple update to DOM. It update it in bulk. React group all change and update in the single batch.
React calculate the changes and applies only when need instead of repainting the entire UI.

Example: Virtual DOM in action.

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

When a button click setCount update the state.
A new virtual DOM is created with the update count value
React compares it with previous virtual DOM and find that only h1 tag has changed.
Instead of re-rendering the whole page. React update the only h1 tag.

This was all about Virtual DOM. What are your thoughts on this. Let me know in the comment section

Supercharge your Django App with caching.

Uttam — Fri, 28 Mar 2025 19:59:29 +0000

Caching is a technique for improving web application performance by storing frequent accessed data. Without cache every request will be used to query in the database or process heavy computational task that will lead to slower response time and increase the server load.

In this blog. We'll explore:

What is caching
why it is important.
Type of caching.
How to implement caching in Django

What is caching?

It is the process of storing the data temporarily which is being accessed frequently. so future request can be response faster without query on database or heavy computational task.

Image Source Prisma Blog

Why caching is important

Reduce database load - minimum query and faster response time
Speed up API Response - cache response are most faster
Enhance the application Scalability - handle the high traffic without overloading the server.

Type of caching.

You can implement caching at different level in the web application.

Browser Caching

Store the static assets (Images, Css, Javascript) in user's browser.
Reduce network request and improve the page load

CDN Caching

A Content delivery network caches the assets across the multiple location.
Useful for global application to serve content closer to user's location.

Server side caching

Database query caching - cache the response for expensive queries.
Frequent data caching - cache the frequently accessed data to improve the response time and server load.

Implementing Cache in Django

Django provides built in cache mechanism that you can integrate with various backend cache service provider like Redis, Mamacached and File-Based Storage cache.
I am using Redis

configure in settings.py file.

Django provide multiple ways to cache different part of your application.

Caching entire views

Django’s @cache_page decorator caches entire views:

Caching Template fragments

If a part of a page takes time to render (e.g., latest news section), cache just that part:

Caching Expensive Database Queries

Use Django’s cache API to store query results:

Thanks for reading :) Have any question or tips? drop them in the comment sections.

5 Essential libraries every React Developers should know.

Uttam — Wed, 19 Mar 2025 17:58:29 +0000

These tools & libraries are very powerful which can help you in your future projects or developments.

1. Video.js

It is most popular open-source JavaScript library for embedding and controlling HTML5 video. It provide customizable and extendable feature. It works cross all browser.

Features of Video.js

Cross Browser Support - It works across all browser
Customizable UI - Player can be styled with your regular css or you can use plugin with already someone has created.
Support Multiple Video Format - It works with MP4, WebM, HLS, and DASH.
Playback Controls - It has built in Play, Pause, Full screen, volumn and Speed adjustment.
Plugins & Extension - It supports wide range of plugin for analytics, subtiles and more.
Subtitles & Caption - It supports WebVTT and other caption formats.
Live Streaming - It can be used for streaming via HLS or DASH

2. useWorker

This is custom hook that allows you to use Web Worker more easily.
Web worker runs in separate thread to prevent the UI lag when you are doing expensive tasks.

Features of useWorker

Runs expensive task without blocking UI.
Light weight library and improve performance and bundle size (Less than 3 KB)
lets you use Promise-Based API instead of event-messages.
instead of creating and managing worker manually you can just use hook only.
It support TypeScript.
Timeout options - you can set a timeout option so that worker can stop when exceeds the limits.
It automatically cleans up workers when they are no longer needed and free up the space.

Without using useWorker

webworker.js

index.js

Using useWorker

Test.js

3. React-Virtual

It is lightweight library efficiently render large list and table by using virtualization

What is virtualization?

Normally, when you have 10000+ items in the list or grid. React renders all of them in DOM (UI) that leads to slow performance and lag.
So virtualization solves this problem by showing only those items which are visible in the UI and dynamically loading/unloading the elements as user scrolls.

using useVirtualizer

VirtulizedList.Jsx

4. React Query

It is powerful data fetching and state management library for React app. It helps API calls, pagination, cache, and background updates.

Features of React Query

Simplifies API calls - No need of useEffect or useState.
Automatic Caching - It avoids uneccessary API calls.
Background updates - It keeps data fetching without manual refetching
Error handling - Builtin error handling and retries.

Here are some examples of react-query hooks

using useQuery

UserList.jsx

using useMutation

AddUser.jsx

using useInfiniteQuery

InfiniteUsersList.jsx

5. Comressor.js

It is powerful image compressor library. It uses the browser HTMLCanvasElement.toBlob() method for compresson work. you can compress the images before uploading them and it make upload faster

Here is a demo

using CompressorJS

compressImage.js

ImageUploader.jsx

Thanks for reading.I hope you found these libraries helpful for your projects. Which of these library do you think would be most helpful for you next project.

Some Popular libraries you should know as a React Developer

Uttam — Mon, 01 May 2023 05:49:22 +0000

On your journey to becoming well-rounded React developers, you would have already come across various libraries, these might have also been on your radar.

So here is a list of 5 popular libraries that can help you to increase your productivity.

1.React-Mentions

This will help you to mention into textarea as you are used to on Facebook or Twitter.

Demo

Example

<MentionsInput value={this.state.value} onChange={this.handleChange}>
  <Mention
    trigger="@"
    data={this.props.users}
    renderSuggestion={this.renderUserSuggestion}
  />
  <Mention
    trigger="#"
    data={this.requestTag}
    renderSuggestion={this.renderTagSuggestion}
  />
</MentionsInput>

NPM: https://www.npmjs.com/package/react-mentions
Website: https://react-mentions.vercel.app

2.React-Cropper

This library has dependency on Cropperjs
This provides image cropping functionality and It allows user to select an area of image and crop it to their desired area.
Cropperjs is highly customizable and supports a wide range of features, such as zooming, rotating, and scaling images

Demo

Example

import React, { useRef } from "react";
import Cropper, { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<ReactCropperElement>(null);
  const onCrop = () => {
    const cropper = cropperRef.current?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

NPM: https://www.npmjs.com/package/react-cropper
Webiste: https://react-cropper.github.io/react-cropper/

3.React-Blurhash

This provides a way to generate and display placeholder for images and uses a technique called as Blurhash

Demo

Example

<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={400}
  height={300}
  resolutionX={32}
  resolutionY={32}
  punch={1}
/>

NPM: https://www.npmjs.com/package/react-blurhash
Website: https://blurha.sh

4.React-Use

This is a popular library for React Hooks that provides a reusable set of modular

here are some hooks provided by react-use

useMedia - tracks state of a CSS media query
useWindowScroll - tracks Window scroll position
useNetworkState - tracks the state of browser's network connection
useAudio - plays audio and exposes its controls
useEffectOnce - a modified version of useEffect that runs only once

NPM: https://www.npmjs.com/package/react-use
Website:https://github.com/streamich/react-use

5.React-Linkify

This provides a simple and customizable way to detect and creates links within text content

Demo

Example

import React from 'react';
import Linkify from 'react-linkify';

function MyComponent() {
  const text = 'See source code at https://github.com/tasti/react-linkify/.';

  return (
    <Linkify>
      <p>{text}</p>
    </Linkify>
  );
}

NPM: https://www.npmjs.com/package/react-linkify
Website: http://tasti.github.io/react-linkify/