Forem: Abhinav Singh

Video Calls Are Harder Than They Look (Thanks, NAT!)

Abhinav Singh — Sun, 07 Sep 2025 08:15:07 +0000

Video calling has become an essential part of modern applications, from casual social apps to enterprise communication platforms. While creating a basic video calling app locally might look simple (thanks to WebRTC and libraries like LiveKit, Agora, or Twilio), deploying it in production introduces a whole new set of challenges, which I also faced while creating a production-grade video calling application. So sometimes just deploying an app teaches you a lot of things.

In this blog, we’ll explore:

How video streaming works at its core
Deployment challenges in production
STUN servers
TURN servers
STUN vs TURN servers
Bandwidth and bitrate considerations
Local vs. Production video calling app comparison

But before starting, let's read some of the definitions that can be useful in this blog.

Bandwidth:

Alright, let’s keep it very simple

Bandwidth is like the width of a water pipe.

A thicker pipe = more water can flow at once.
A thinner pipe = less water can flow, so it takes longer to fill a bucket.

In the internet world:

Bandwidth = how much data (audio, video, files) your internet can send or receive per second.
It’s usually measured in Mbps (megabits per second).

Example:

If your video call needs 2 Mbps and your internet bandwidth is only 1 Mbps, the video will lag or look blurry.
If you have 50 Mbps bandwidth, you can easily run calls, stream movies, and browse at the same time.

In short: Bandwidth = how much data your internet pipe can carry at one time.

Now you may be thinking, "OHH MAANNN, So my internet speed is my bandwidth!!" and the answer is "NO".
Let me clear these two analogies for you:

Bandwidth vs Internet Speed

Bandwidth → The maximum capacity of your internet connection.
- Like the width of the road (how many cars can go at once).
- Measured in Mbps (Megabits per second).
Internet Speed → How fast data actually moves at a given moment.
- Like the speed of cars on that road.
- Affected by bandwidth, network congestion, server distance, etc.

Example:

Your ISP plan = 100 Mbps bandwidth (the road can carry 100 cars).
But if the website’s server is slow or many people in your house are streaming, you might only get 40 Mbps internet speed at that time (cars are moving slower).

In short:

Bandwidth = maximum lane capacity.
Internet speed = how fast traffic is actually moving now.

High bandwidth allows many devices to use the internet simultaneously without slowing down, and high speed makes individual tasks, such as downloading a file, complete faster.

Bitrate:

Bitrate means how much data is being sent or received every second in a video/audio stream.

It’s measured in kbps (kilobits per second) or Mbps (megabits per second).
Higher bitrate = better quality (clearer video/audio), but it needs more bandwidth.
Lower bitrate = smaller data, works on slow internet, but quality looks worse.

Example with Video Call

360p video → ~300–600 kbps
720p video (HD) → ~1.2–1.5 Mbps
1080p video (Full HD) → ~2–3 Mbps
4K video → ~10–15 Mbps

If your internet bandwidth is less than the required bitrate, your call will lag, blur, or drop.

Simple Analogy

Bitrate is like the speed of water flowing through the pipe.

Bandwidth = pipe size (maximum it can carry).
Bitrate = how much water you’re actually pouring in.

If your bitrate demand is more than your bandwidth supply → overflow (lag).

Bandwidth vs Bitrate

Term	What it Means	Measured In	Analogy	Example in Video Calls
Bandwidth	Maximum capacity of your internet connection (how much data can flow at once).	Mbps (Megabits per second)	Pipe size (wide pipe = more flow)	Your Wi-Fi plan gives you 50 Mbps bandwidth.
Bitrate	Actual data used by video/audio per second.	Kbps / Mbps	Water flowing inside the pipe	A 720p video call needs ~1.5 Mbps bitrate.

In short:

Bandwidth = supply (how much your internet can handle).
Bitrate = demand (how much your video/audio needs).

If bitrate > bandwidth, you’ll see lag, buffering, or blurry video.

NAT:

NAT (Network Address Translation) is a method used by routers to allow multiple devices in a private network (like your home Wi-Fi) to share a single public IP address on the internet.

It's is a process done by your router that:

Takes the private IP of your device (like your phone/laptop inside home Wi-Fi).
Converts it into the public IP of your internet connection when you go online.
When a reply comes back, it again converts that public IP to your device’s private IP.

This way, many devices in your home can share one internet connection and one public IP.

It hides private IPs (if you are thinking that your private IP is not exposed through NAT like wifi router, then yes, you are correct at some points) and translates them into the public IP when sending data outside, and back into private IPs when receiving data inside.

SFU = Selective Forwarding Unit

It’s a special type of server used in video calling apps.

In a normal peer-to-peer call (mesh): every participant sends their video to everyone else directly. If 5 people are in a call, each person sends 4 copies of their video → heavy on upload bandwidth.

With an SFU:

Each participant sends only one copy of their video to the SFU server.
The SFU then forwards (routes) that video to all the other participants.
The SFU doesn’t decode/re-encode video (it just forwards it), so it’s efficient.

Benefits of SFU:

Saves a lot of upload bandwidth.
Works better for group calls.
Supports features like simulcast (sending multiple quality levels so others can get 720p, 360p, etc., based on their internet).

Downside:

Still needs a server (extra cost).
Each participant still has to download multiple streams (one for each person in the call).

How Video Streaming Works in Video Calls

At the core, a video calling app involves:

Capturing Media → Device camera and microphone capture audio/video.
Encoding & Compression → Using codecs like VP8, H.264, or Opus (audio) to reduce bandwidth usage.
Packetization → Splitting data into small packets for network transmission.
Transport Layer → Typically WebRTC, which ensures real-time, encrypted peer-to-peer communication.
Rendering → On the receiving side, packets are reassembled, decoded, and rendered in <video> tags.

This flow is straightforward on a local network but faces network, scaling, and reliability challenges in production.

Deployment Challenges in Production

You may have seen a lot of video tutorials on YouTube teaching you how to make a video calling application in nodejs and other stuff which looks quite simple, but is it really that simple?
When moving from a local test app to a production-ready system, you face:

NAT and Firewall Traversal

Local: Devices on the same Wi-Fi often connect directly.
Production: Users are behind NATs, corporate firewalls, or symmetric NATs. Direct peer-to-peer connections often fail.

Scalability

Local: 1:1 calls are manageable.
Production: Group calls (5, 10, 50+) require SFUs (Selective Forwarding Units) or MCUs (Multipoint Control Units) to efficiently handle streams.

Reliability & Quality

Packet loss, jitter, and fluctuating bandwidth affect call quality.
Adaptive bitrate algorithms (Simulcast, SVC) are required for a smooth experience.

Security & Privacy

End-to-end encryption must be enforced.
Compliance (HIPAA, GDPR) may apply for enterprise or healthcare apps.

What is a STUN Server?

STUN = Session Traversal Utilities for NAT

A STUN server helps your device find out its public IP and port when it’s behind a NAT (like your Wi-Fi router).
With this info, two devices (peers) can try to connect directly to each other.
Example: Your laptop asks the STUN server, “What’s my public address?” The server replies, “It’s 49.35.21.10:54555.” Now your laptop can share this with another peer for direct communication.

In short: STUN is like asking Google Maps “What’s my current location?” so you can tell your friend where to meet you.

What is a TURN Server?

TURN = Traversal Using Relays around NAT

Sometimes, direct connection fails (for example, in offices with strict firewalls or symmetric NAT).
In that case, a TURN server acts like a post office (relay).
Instead of sending video/audio directly to the other peer, your data goes through the TURN server → TURN forwards it to the other person.
This guarantees the connection works, but it increases latency and server cost because all media traffic flows through TURN.

In short: TURN is like saying, “We can’t meet directly, so let’s send all our letters through the post office.”

Key difference:

STUN → Helps peers connect directly.
TURN → Relays traffic when direct connection is impossible.

STUN vs TURN: What’s the Difference?

When peers try to connect, they need help to “discover” each other’s public IPs and establish connectivity. That’s where STUN and TURN servers come in.

Feature	STUN (Session Traversal Utilities for NAT)	TURN (Traversal Using Relays around NAT)
Purpose	Finds your public IP and port	Relays traffic if direct P2P fails
Usage	Lightweight, used in 70-80% of cases	Heavy, used when strict firewalls/NATs block P2P
Latency	Low (direct P2P connection)	Higher (adds relay hop)
Cost	Cheap / Free (Google STUN servers available)	Expensive (requires high bandwidth relay servers)
When Needed	Simple NAT traversal may be blocked by strong firewalls.	Enterprise networks, corporate firewalls, symmetric NATs

In local apps: STUN often works fine.
In production apps: You must deploy TURN servers (like Coturn) for guaranteed connectivity.

Simple Analogy

STUN = Asking a friend, “Where am I on the map?” → so you can tell others how to reach you.
TURN = Post office → if you and your friend can’t meet directly, you both send letters to the post office, and it forwards them.

Flow of STUN/TURN in a Video Call

Device captures media

Your app captures video/audio from the camera and mic.

Signaling phase

Both users (peers) exchange “offers” and “answers” (SDP – Session Description Protocol) through a signaling server (e.g., WebSocket, REST).
This describes codecs, capabilities, and candidate connection options.

ICE Candidate Gathering

Each device tries to figure out how it can be reached over the internet.
Here, the STUN server is contacted:
- Peer asks: “What’s my public IP & port?”
- STUN replies with: “Your public address is 49.35.21.10:54555.”
This info is added as an ICE candidate.

Peer-to-Peer Connection Attempt

Both peers exchange their ICE candidates (possible network paths).
They try to connect directly using these candidates (NAT traversal).
If successful → direct P2P connection established.

Fallback to TURN (if direct fails)

If peers cannot connect directly (because of strict NAT/firewall), they use a TURN server.
In this case:
- Peer A sends data to TURN server.
- TURN relays it to Peer B (and vice versa).
This increases latency and server cost but guarantees connection.

Flow Summary in One Line

App → Signaling → STUN (find public IP) → Try direct P2P → If fail, use TURN relay.

Bandwidth and Bitrate Calculations

Video quality directly impacts bandwidth usage. Approximate bitrates:

Audio (Opus codec) → 30–100 kbps
Video (VP8 / H.264):
- 360p (low) → 300–600 kbps
- 720p (HD) → 1.2–1.5 Mbps
- 1080p (Full HD) → 2–3 Mbps
- 4K → 10–15 Mbps

Example: A 4-person call at 720p

Without SFU (mesh): Each peer sends 3 outgoing streams → ~4.5 Mbps upstream.
With SFU: Each peer sends 1 stream, receives 3 streams → ~3.6 Mbps total.

SFUs save a huge amount of bandwidth and are necessary for production.

Local vs Production Video Calling App

Aspect	Local Setup (Testing)	Production Setup (Real-world)
Connectivity	Direct peer-to-peer (via STUN)	Needs TURN for reliability
Scale	Works for 1:1 or small calls	Needs SFU/MCU for group calls
Latency	Low (same Wi-Fi)	Variable (depends on networks)
Bandwidth Handling	Fixed, no adaptive bitrate	Adaptive bitrate + Simulcast
Security	Basic encryption (WebRTC default)	Enterprise-grade, compliance
Cost	Minimal	Higher (TURN servers, infra)

Key Takeaways

Building a local video calling app is easy, but production requires TURN, SFU/MCU, adaptive bitrate, and strong security.
STUN helps 70–80% of cases, but TURN is mandatory for full reliability.
Bandwidth grows quickly with participants; SFU saves bandwidth and improves performance.
Always calculate expected bitrate × participants to estimate infrastructure needs.

The Most Underrated Tech Skill

Abhinav Singh — Tue, 02 Sep 2025 12:57:28 +0000

Let’s be honest — these days, there’s a course for literally everything.
Want to learn React? There’s a course.
Want to learn HTML (yes, even HTML)? There’s a course.
Next.js, Docker, Kubernetes — you name it, and someone’s selling you a “complete guide.”

And yet, even with all these resources, most beginners still feel lost.
I’ve seen it again and again: people buy a course, finish a few chapters, and then… hop on to the next one. The cycle never ends.

Here’s the hard truth: the problem isn’t the lack of resources. It’s the mindset.

The Comfort Trap of Courses

Think about it — why do we like courses so much?
Because everything is packaged neatly, one instructor tells you exactly what to do, step by step, in the right order. It feels safe.

But the real world isn’t like that.
When you’re working on a project, no one is going to hand you a perfectly curated roadmap. You’ll face errors, confusing docs, and unexpected updates.

That’s why many juniors struggle in their first jobs. They’re used to being spoon-fed by courses, and when something isn’t covered in a video, they freeze.

It’s like learning to ride a bike using training wheels forever — the day those wheels come off, you crash.

Why Docs Are the Real Superpower

Now, let me ask you this:
How many times have you ignored official docs just because they look boring or too long?

I’ve been there. When I started out, I’d search YouTube before even glancing at the docs. But over time, I realized something — docs are the most reliable, up-to-date, and detailed resource you’ll ever get.

Here’s why:

✅ Always updated: Courses get outdated. Docs are maintained by the creators themselves.
✅ Explain the “why”: Courses often show you what to do. Docs explain why it works that way.
✅ Make you independent: Instead of depending on someone’s playlist, you can figure things out yourself.

The day you get comfortable with docs, you stop fearing new technologies. Tailwind v4? Next.js 15? No problem. Because you know how to learn directly from the source.

How Courses Should Evolve

Don’t get me wrong — I’m not against courses. They’re a great way to kick-start learning.
But I wish more courses did this:

👉 Teach students how to read and navigate docs.
👉 Show how to troubleshoot using official resources.
👉 Encourage experimenting beyond the video.

Imagine a course where the instructor says: “Alright, instead of me explaining, let’s go through the docs together and figure this out.”
That’s the kind of learning that builds confidence.

Final Thoughts

Courses and AI tools are like Google Maps — they’ll get you from point A to B quickly. But if you never learn to actually navigate the city, you’ll always be lost without them.

Docs are that map-reading skill. Once you learn it, you’ll never feel stuck again.

So the next time you’re stuck, resist the temptation to look up “how to fix X in React” on YouTube.
Instead, open the docs. Struggle a little. Explore. You’ll be surprised how much you grow.

Because in tech, the real freedom begins when you stop depending on shortcuts and start learning from the source.

AntD and Shad CN: Why Waste Time Being Creative When You Can Just Copy-Paste?

Abhinav Singh — Fri, 31 Jan 2025 19:43:37 +0000

AntD and Shad CN: Why Waste Time Being Creative When You Can Just Copy-Paste?

Introduction

In the fast-paced world of web development, it can be tempting to go for the quickest solution when building interfaces and applications. Why spend countless hours innovating when a simple copy-paste might just do the trick? Enter Ant Design (AntD) and ShadCN, tools that streamline the development process but also nurture the notion of adopting existing designs without an ounce of creativity. In this article, we’ll delve into the allure of these frameworks while also exploring the potential pitfalls of copying versus creating.

The Rise of AntD and Shad CN

AntD, a design system created by Alibaba, and ShadCN, an emerging player in the realm of design utilities, both thrive on offering pre-built components and themes. But what makes these frameworks so appealing?

Pre-Built Components

Efficiency: AntD and ShadCN provide a plethora of pre-built UI components—from buttons to form layouts. This means developers can drag and drop elements instead of building them from scratch, drastically reducing time-to-market.
Consistency: Consistent design across applications leads to better user experience. With AntD and ShadCN, you’re guaranteed high-quality components that adhere to design best practices.

"Using frameworks like AntD saves time, but at what cost to originality?"

Accessibility and Community Support

Both AntD and ShadCN boast active communities that contribute to their libraries, welcome new users, and provide support. This engagement can be a boon for developers accustomed to less popular tools.

Forums and Documentation: Robust documentation and user forums offer rich resources for troubleshooting and learning.
Regular Updates: Continuous updates keep the libraries current with design trends and technological advancements.

The Copy-Paste Mentality

While the promise of efficiency is enticing, there's a growing concern about the “copy-paste mentality” emerging among developers.

The Risks of Copying

Lack of Uniqueness: When developers lean too heavily on templates, products become homogenized. This over-reliance leads to a lack of innovation in design and functionality.
Limited Brand Identity: Companies risk diluting their brand identity when they default to widely-used UI components rather than customizing their designs to reflect their unique messaging.

Creativity vs. Productivity

Productivity is undeniably important in development. But, at what point does choosing efficiency over creativity hinder progress?

Encouraging Originality: Challenges can arise when developers must step outside their comfort zones. Incorporating custom designs fosters creativity.
Creating Unique User Experiences: Tailored designs can lead to enhanced user experiences that resonate with audiences more profoundly than templated designs could.

Balancing Both Worlds: Creativity and Efficiency

So, how can developers make the most of AntD and ShadCN while nurturing their creativity simultaneously?

Customizable Components

Both frameworks offer customization options, empowering developers to modify styles and functionalities. Here’s how:

Tailoring Components: Adjust styles directly to match your branding. Use CSS-in-JS strategies to create unique visual styles.
Combining Elements: Mix and match components from different libraries to create something that feels fresh and novel.

Hybrid Approach

Use Frameworks as a Foundation: Start with a base layout from AntD or ShadCN, and build upon it. This keeps the efficiency intact while allowing for creative input.
Iterative Design: Adopt an iterative workflow. Create sketches or wireframes before jumping into code. This approach allows developers to visualize before finalizing a product.

Conclusion

While it’s tempting to lean on established frameworks like AntD and ShadCN for their efficiency and community support, it’s equally important to foster creativity in design. By using these tools wisely—customizing components and adopting a hybrid approach—developers can achieve a balance between productivity and originality.

"In web development, true innovation lies in enhancing existing frameworks rather than merely adopting them."

So, the next time you find yourself tempted by the allure of easy copy-pasting, take a moment to consider how you can create something distinct and innovative. The world of web design thrives on individuality—don't waste the opportunity to contribute your unique perspective!

React.js vs Next.js: A Detailed Comparison

Abhinav Singh — Wed, 09 Oct 2024 06:43:26 +0000

In this blog, I will take you through a detailed comparison of two popular technologies used in the world of web development: React.js and Next.js. Whether you're new to development or have some experience, understanding the differences between React and Next.js will help you choose the right tool for your next project. Let's dive in!

Introduction to React.js

React.js is a JavaScript library for building user interfaces, primarily for single-page applications (SPAs). Created by Facebook, React.js allows developers to create large web applications that can update and render efficiently without reloading the entire page. It focuses solely on the view layer (the UI part of the app) and is often combined with other libraries or frameworks for state management, routing, and more.

Key Features of React.js:

Component-Based Architecture: Everything in React is built using reusable components.
Virtual DOM: React updates only the part of the UI that changes, making it efficient.
One-Way Data Binding: Ensures that the data flows in one direction, making debugging easier.
JSX: JavaScript syntax extension that allows developers to write HTML-like code inside JavaScript.

Introduction to Next.js

Next.js is a framework built on top of React.js, providing additional features such as server-side rendering (SSR), static site generation (SSG), and file-based routing. Developed by Vercel, Next.js simplifies the process of building modern web applications and enhances performance, scalability, and SEO capabilities.

Key Features of Next.js:

Server-Side Rendering (SSR): Pages can be rendered on the server before being sent to the client.
Static Site Generation (SSG): Pages can be pre-rendered at build time.
File-Based Routing: Simplifies navigation by using the file system for routing.
API Routes: Built-in support for creating APIs within the same project.

Key Differences Between React.js and Next.js

React.js and Next.js are often compared because Next.js is built on top of React, but they serve different purposes. Let's break down the key differences between the two.

Rendering Modes

React.js:

In React.js, everything is rendered on the client side. Once the initial HTML is sent from the server, React takes over and renders the rest of the content dynamically in the browser using JavaScript. This is known as Client-Side Rendering (CSR). It can lead to a slower initial load, especially for large apps, as the browser has to download and run all the JavaScript before displaying content.
Next.js:

Next.js supports Server-Side Rendering (SSR) and Static Site Generation (SSG) in addition to Client-Side Rendering (CSR). SSR means the page is pre-rendered on the server and sent as HTML to the browser, improving initial load times. SSG pre-generates pages at build time, making them even faster as they are served as static HTML files.

Key Takeaway:

If you need SSR or SSG to improve performance or SEO, Next.js is the better choice. React.js alone only supports CSR.

File-Based Routing vs Component-Based Routing

React.js:

React does not have a built-in routing system. You need to install a separate library like react-router to manage routes. With react-router, you define routes within your components, which gives you flexibility but also adds complexity as your app grows.
Next.js:

Next.js comes with a built-in, easy-to-use file-based routing system. You create a new page by simply creating a new file inside the pages directory, and Next.js automatically maps that file to a route. This structure is intuitive and keeps things organized, especially in larger projects.

Key Takeaway:

Next.js makes routing simpler and more structured by providing a built-in, file-based routing system, whereas React.js requires additional setup for routing.

Server-Side Rendering (SSR) Support

React.js:

React, by itself, doesn't support SSR out of the box. You would need to use external libraries or frameworks (like Next.js) to implement server-side rendering.
Next.js:

Next.js has built-in SSR support. You can decide on a per-page basis whether to render the page on the server or on the client. This flexibility is a major advantage, especially for SEO-critical pages.

Key Takeaway:

If SSR is important for your application, Next.js is the better option as it provides SSR natively.

Performance and Optimization

React.js:

React focuses solely on client-side rendering, which can sometimes cause performance issues, particularly on the initial load of the application. You need to handle performance optimizations manually, such as code-splitting or lazy loading.
Next.js:

Next.js optimizes performance out of the box. It comes with built-in tools like automatic code-splitting, image optimization, and static generation, which help improve the performance of your app without much effort.

Key Takeaway:

Next.js provides automatic performance optimizations, whereas React requires more manual effort to achieve similar performance levels.

SEO Support

React.js:

Since React relies on client-side rendering, search engines may have difficulty crawling the content, which can negatively impact SEO. Workarounds like server-side rendering can improve SEO, but they require additional setup.
Next.js:

Next.js is SEO-friendly right out of the box due to its server-side rendering and static site generation capabilities. By pre-rendering pages, Next.js ensures that search engines can easily crawl your content, improving visibility on search engine results pages (SERPs).

Key Takeaway:

Next.js is the better option if SEO is a critical concern for your project.

Ease of Setup

React.js:

Setting up a React project can be straightforward, especially with tools like Create React App (CRA). However, as your project grows, you may need to configure and integrate additional libraries for routing, SSR, state management, etc., which can add complexity.
Next.js:

Next.js comes with many features built-in, such as routing, SSR, and static site generation, which reduces the need for additional configuration. The setup process is still simple, but you get more out-of-the-box functionality compared to React.js.

Key Takeaway:

Next.js offers a more comprehensive setup with built-in features, while React.js requires more manual configuration for additional features.

Deployment

React.js:

React applications are generally deployed as static files (HTML, CSS, and JavaScript) to any hosting service like Vercel, Netlify, or traditional web servers. Deployment is easy, but since React apps are client-rendered, they may face performance issues on the first load.
Next.js:

Next.js apps can be deployed as both static sites and server-rendered applications. Vercel, the company behind Next.js, provides seamless integration and optimized deployment for Next.js applications. You also get features like automatic scaling and CDN caching.

Key Takeaway:

Next.js is more versatile in terms of deployment options and offers built-in support for both static and dynamic deployments.

When to Use React.js

You are building a single-page application (SPA) where SEO is not a priority.
You prefer more control over routing and other configurations.
You are comfortable handling performance optimizations manually.
You want a lightweight solution focused on client-side rendering.

When to Use Next.js

You need better SEO with server-side rendering or static site generation.
You prefer an opinionated framework with built-in features like routing and SSR.
You want performance optimizations without manual setup.
You plan to deploy the app on platforms like Vercel for seamless integration.

Conclusion

In the end, choosing between React.js and Next.js depends on the requirements of your project. React.js is excellent for building rich, dynamic user interfaces and single-page applications, especially when SEO and initial load time are not major concerns. However, if you're looking for a more complete solution with built-in SEO support, performance optimizations, and server-side rendering, Next.js is the way to go.

Both React.js and Next.js have their strengths, and the choice ultimately comes down to the specific needs of your project. Hopefully, this guide helped you understand the key differences between these two powerful technologies.

Feel free to visit my portfolio for more blogs and projects!

Mastering `setTimeout` and `setInterval` in JavaScript

Abhinav Singh — Thu, 01 Aug 2024 06:21:39 +0000

In the bustling world of JavaScript, time management is key. Imagine you're developing a dynamic web application, and you need to execute a function after a certain period, or repeatedly run a function at specified intervals. This is where setTimeout and setInterval come into play. These two functions allow developers to control the timing of their code execution, making web applications more interactive and responsive. In this blog, we'll dive deep into setTimeout and setInterval, explore their usage through engaging examples, and discuss how to use async/await with them.

The Basics of `setTimeout`

What is `setTimeout`?

setTimeout is a JavaScript function that sets a timer which executes a function or specified piece of code once the timer expires. It's a fundamental tool for managing asynchronous operations.

Syntax of `setTimeout`

setTimeout(function, delay, arg1, arg2, ...);

function: The function to be executed after the timer expires.
delay: The time in milliseconds before the function is executed.
arg1, arg2, ...: Additional arguments passed to the function.

Example: A Simple `setTimeout`

Let's start with a simple example. Imagine you are cooking and need a reminder to check the oven in 5 seconds.

function checkOven() {
    console.log("Time to check the oven!");
}

setTimeout(checkOven, 5000); // 5000 milliseconds = 5 seconds

In this example, the checkOven function will be executed once after 5 seconds.

The Basics of `setInterval`

What is `setInterval`?

setInterval is a JavaScript function that sets a timer which executes a function or specified piece of code repeatedly, with a fixed time delay between each call.

Syntax of `setInterval`

setInterval(function, delay, arg1, arg2, ...);

function: The function to be executed repeatedly.
delay: The time in milliseconds between each function execution.
arg1, arg2, ...: Additional arguments passed to the function.

Example: A Simple `setInterval`

Let's enhance our cooking scenario. Suppose you need to stir the soup every 2 seconds.

function stirSoup() {
    console.log("Stirring the soup...");
}

setInterval(stirSoup, 2000); // 2000 milliseconds = 2 seconds

In this example, the stirSoup function will be executed every 2 seconds.

Clearing Timers

`clearTimeout`

To stop a setTimeout from executing, use clearTimeout.

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

`clearInterval`

To stop a setInterval from repeating, use clearInterval.

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

Advanced Usage with Examples

Passing Arguments to Functions

Both setTimeout and setInterval can pass arguments to the function being executed.

function greet(name) {
    console.log(`Hello, ${name}!`);
}

setTimeout(greet, 3000, "Alice"); // Outputs "Hello, Alice!" after 3 seconds

Nested `setTimeout` for Recurring Tasks

Instead of using setInterval, you can use nested setTimeout for more precise control over recurring tasks.

function fetchData() {
    console.log("Fetching data...");

    setTimeout(fetchData, 2000); // Recursively call fetchData every 2 seconds
}

fetchData();

Story: A Digital Kitchen Timer

Imagine you're building a digital kitchen timer app. Users can set multiple timers for different cooking tasks. Using setTimeout and setInterval, you can manage these timers efficiently.

class KitchenTimer {
    constructor() {
        this.timers = [];
    }

    addTimer(name, duration) {
        let timerId = setTimeout(() => {
            console.log(`${name} timer done!`);
            this.removeTimer(timerId);
        }, duration);

        this.timers.push({ name, timerId });
        console.log(`${name} timer set for ${duration / 1000} seconds.`);
    }

    removeTimer(timerId) {
        this.timers = this.timers.filter(timer => timer.timerId !== timerId);
    }

    clearAllTimers() {
        this.timers.forEach(timer => clearTimeout(timer.timerId));
        this.timers = [];
        console.log("All timers cleared.");
    }
}

let myKitchen = new KitchenTimer();
myKitchen.addTimer("Pasta", 5000);
myKitchen.addTimer("Cake", 10000);

setTimeout(() => {
    myKitchen.clearAllTimers();
}, 8000); // Clear all timers after 8 seconds

Using `async` and `await` with `setTimeout`

Although setTimeout is not a promise-based function, you can use it with async and await by wrapping it in a promise.

Example: Wrapping `setTimeout` in a Promise

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    console.log("Task started...");
    await delay(2000);
    console.log("Task completed after 2 seconds.");
}

asyncTask();

In this example, the delay function returns a promise that resolves after the specified delay. The asyncTask function uses await to pause execution until the promise resolves.

Using `async` and `await` with `setInterval`

Handling setInterval with async and await is more complex, as it requires a way to repeatedly await a delay.

Example: Simulating `setInterval` with `async` and `await`

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncIntervalTask() {
    while (true) {
        console.log("Interval task executing...");
        await delay(2000);
    }
}

asyncIntervalTask();

In this example, the asyncIntervalTask function simulates a recurring task by using a while loop with await on the delay function.

Conclusion

Understanding and mastering setTimeout and setInterval is crucial for any JavaScript developer. These functions provide powerful ways to manage timing and asynchronous operations in your applications. By leveraging their capabilities, you can create more interactive and dynamic web experiences. Additionally, by integrating them with async and await, you can achieve even more control and clarity in your asynchronous code.

Whether you're building a digital kitchen timer or any other application that requires precise timing, setTimeout and setInterval are essential tools in your JavaScript toolkit. Happy coding!

React's Dirty Little Secret: Error Boundaries in Functional Components

Abhinav Singh — Sun, 07 Jul 2024 13:53:06 +0000

Errors are inevitable in any application, and handling them gracefully is crucial for providing a seamless user experience. In React, error boundaries are a robust mechanism for capturing and managing errors in a component tree. Traditionally, error boundaries were implemented using class components, but with the advent of React hooks, it's now possible to create error boundaries in functional components as well. This blog will guide you through the concepts of error boundaries in React functional components, using easy-to-understand examples and storytelling to make the topic approachable.

What Are Error Boundaries?

The Concept

Imagine you're building a house. You'd want to ensure that any structural issues in one part of the house don't cause the entire building to collapse. Similarly, in a React application, an error in one part of the UI should not bring down the entire application. Error boundaries act as protective barriers that catch errors in their child components and display fallback UI instead of crashing the whole application.

Traditional Class Component Error Boundaries

Before diving into functional components, let's briefly revisit how error boundaries are traditionally implemented using class components:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

The Story of Error Boundaries

Meet Jane, the Frontend Developer

Jane is a talented frontend developer working on a complex React application. One day, her team faces a challenge: the app occasionally crashes due to errors in various components. Jane needs a solution to handle these errors gracefully and ensure a smooth user experience. She remembers hearing about error boundaries but wants to implement them in functional components since her team prefers hooks over class components.

Error Boundaries in Functional Components

The Challenge

Implementing error boundaries in functional components isn't straightforward because React hooks don't support the same lifecycle methods available in class components. However, with some creativity and the use of custom hooks, Jane can achieve the same functionality.

Creating a Custom Hook for Error Boundaries

Jane decides to create a custom hook, useErrorBoundary, to manage error boundaries in functional components. This hook will leverage React's context API to provide error boundary functionality.

Here's how Jane implements it:

import React, { createContext, useContext, useState, useEffect } from 'react';

const ErrorBoundaryContext = createContext();

export const useErrorBoundary = () => {
  return useContext(ErrorBoundaryContext);
};

export const ErrorBoundaryProvider = ({ children }) => {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  const value = {
    hasError,
    setHasError,
    error,
    setError,
  };

  return (
    <ErrorBoundaryContext.Provider value={value}>
      {children}
    </ErrorBoundaryContext.Provider>
  );
};

Implementing Error Boundaries in Functional Components

Step-by-Step Guide

Set Up the Context:

Jane sets up a context to manage the error state and provides functions to update this state. This context will be used by components to access error boundary functionality.

   import React, { createContext, useContext, useState } from 'react';

   const ErrorBoundaryContext = createContext();

   export const useErrorBoundary = () => {
     return useContext(ErrorBoundaryContext);
   };

   export const ErrorBoundaryProvider = ({ children }) => {
     const [hasError, setHasError] = useState(false);
     const [error, setError] = useState(null);

     const value = {
       hasError,
       setHasError,
       error,
       setError,
     };

     return (
       <ErrorBoundaryContext.Provider value={value}>
         {children}
       </ErrorBoundaryContext.Provider>
     );
   };

Create a Component to Handle Errors:

Jane creates a component, ErrorBoundary, that uses the custom hook to manage errors and display a fallback UI when an error occurs.

   import React from 'react';
   import { useErrorBoundary } from './ErrorBoundaryContext';

   const ErrorBoundary = ({ children, fallback }) => {
     const { hasError, error } = useErrorBoundary();

     if (hasError) {
       return fallback ? fallback : <h1>Something went wrong.</h1>;
     }

     return children;
   };

   export default ErrorBoundary;

Wrap the Application with the Error Boundary Provider:

Jane wraps her application with the ErrorBoundaryProvider to provide error boundary functionality to the entire component tree.

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import { ErrorBoundaryProvider } from './ErrorBoundaryContext';

   ReactDOM.render(
     <ErrorBoundaryProvider>
       <App />
     </ErrorBoundaryProvider>,
     document.getElementById('root')
   );

Use the Error Boundary in a Component:

Jane uses the ErrorBoundary component to wrap any part of the UI that might throw an error. She also provides a custom fallback UI.

   import React from 'react';
   import ErrorBoundary from './ErrorBoundary';

   const ProblematicComponent = () => {
     throw new Error('Oops!');

     return <div>This will never be displayed.</div>;
   };

   const App = () => {
     return (
       <div>
         <h1>My Application</h1>
         <ErrorBoundary fallback={<div>Custom Error Message</div>}>
           <ProblematicComponent />
         </ErrorBoundary>
       </div>
     );
   };

   export default App;

Advanced Error Handling

Logging Errors

Jane realizes that simply displaying a fallback UI isn't enough. She needs to log errors for further analysis. She modifies the useErrorBoundary hook to include error logging.

import React, { useEffect } from 'react';
import { useErrorBoundary } from './ErrorBoundaryContext';

const ErrorLogger = () => {
  const { error } = useErrorBoundary();

  useEffect(() => {
    if (error) {
      // Log error to an external service
      console.error('Logging error:', error);
    }
  }, [error]);

  return null;
};

export default ErrorLogger;

Jane then includes the ErrorLogger component in her application:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ErrorLogger from './ErrorLogger';

const ProblematicComponent = () => {
  throw new Error('Oops!');

  return <div>This will never be displayed.</div>;
};

const App = () => {
  return (
    <div>
      <h1>My Application</h1>
      <ErrorLogger />
      <ErrorBoundary fallback={<div>Custom Error Message</div>}>
        <ProblematicComponent />
      </ErrorBoundary>
    </div>
  );
};

export default App;

Resetting Error Boundaries

Sometimes, Jane needs to reset the error boundary after an error occurs. She adds a reset function to the context to allow components to reset the error state.

import React from 'react';
import { useErrorBoundary } from './ErrorBoundaryContext';

const ErrorBoundary = ({ children, fallback }) => {
  const { hasError, error, setHasError, setError } = useErrorBoundary();

  const resetErrorBoundary = () => {
    setHasError(false);
    setError(null);
  };

  if (hasError) {
    return (
      <div>
        {fallback ? fallback : <h1>Something went wrong.</h1>}
        <button onClick={resetErrorBoundary}>Try Again</button>
      </div>
    );
  }

  return children;
};

export default ErrorBoundary;

Real-World Example

The Shopping Cart Application

To solidify her understanding, Jane decides to implement error boundaries in a real-world scenario: a shopping cart application. She sets up a simple app with components that might throw errors and uses error boundaries to handle them.

import React, { useState } from 'react';
import ErrorBoundary from './ErrorBoundary';

const ProductList = () => {
  const [products] = useState(['Apple', 'Banana', 'Cherry']);
  const [selectedProduct, setSelectedProduct] = useState(null);

  const handleSelectProduct = (product) => {
    if (product === 'Banana') {
      throw new Error('Banana is out of stock!');
    }
    setSelectedProduct(product);
  };

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map((product) => (
          <li key={product} onClick={() => handleSelectProduct(product)}>
            {product}
          </li>
        ))}
      </ul>
      {selectedProduct && <div>Selected Product: {selectedProduct}</div>}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Shopping Cart</h1>
      <ErrorBoundary fallback={<div>Sorry, something went wrong!</div>}>
        <ProductList />
      </ErrorBoundary>
    </div>
  );
};

export default App;

Conclusion

Jane successfully implemented error boundaries in functional components using custom hooks and context. She learned how to display fallback UI, log errors, and reset error boundaries. Her shopping cart application now handles errors gracefully, providing a better user experience.

By understanding and implementing error boundaries, you too can build resilient React applications that handle errors gracefully and maintain a smooth user experience. Happy coding!

Understanding Reconciliation and the Virtual DOM in React

Abhinav Singh — Wed, 03 Jul 2024 10:25:46 +0000

React is a powerful JavaScript library for building user interfaces, and two of its core concepts are reconciliation and the Virtual DOM. Understanding these concepts can help you write more efficient and effective React applications. In this blog, we'll break down these ideas in simple terms and provide examples to illustrate how they work.

What is the Virtual DOM?

Before diving into reconciliation, it's essential to understand the Virtual DOM.

The Real DOM

The Document Object Model (DOM) represents the structure of a web page. It is a tree-like structure where each element (e.g., a paragraph, a div) is a node. When you update the DOM, the browser must re-render the affected parts of the page, which can be slow and inefficient, especially for complex applications.

The Virtual DOM

The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM. React uses the VDOM to optimize updates to the real DOM. Here's how it works:

Initial Render: When a React component renders for the first time, React creates a VDOM representation of the real DOM.
Updating: When the state or props of a component change, React creates a new VDOM tree.
Comparison: React compares the new VDOM tree with the previous one to identify what has changed.
Real DOM Update: React updates only the parts of the real DOM that have changed, minimizing the number of manipulations.

This process makes updates faster and more efficient.

What is Reconciliation?

Reconciliation is the process of updating the real DOM based on changes in the Virtual DOM. Let's delve deeper into how this works.

Steps of Reconciliation

Create a New VDOM: When a component's state or props change, React creates a new VDOM tree.
Diffing Algorithm: React uses a diffing algorithm to compare the new VDOM tree with the previous one. It identifies the differences (nodes that have been added, removed, or changed).
Apply Changes: React updates the real DOM with the identified changes, ensuring minimal updates for better performance.

Example: Simple Counter Application

Let's look at an example to understand these concepts better.

import React, { useState } from 'react';

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

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

export default Counter;

In this example:

The Counter component renders an initial count of 0.
When you click the "Increment" button, setCount updates the state.
React creates a new VDOM with the updated count.
React compares the new VDOM with the previous VDOM and identifies that only the count has changed.
React updates only the text inside the <h1> tag in the real DOM, leaving the rest unchanged.

Why is the Virtual DOM Efficient?

The efficiency of the VDOM comes from reducing direct manipulation of the real DOM. Directly updating the real DOM is slow because it involves layout reflows and repaints. The VDOM minimizes these operations by batching updates and only applying the necessary changes.

Key Benefits of the Virtual DOM and Reconciliation

Performance: Updates are faster because React only updates the parts of the DOM that have changed.
Abstraction: Developers can write declarative code, focusing on what the UI should look like rather than how to update the DOM.
Consistency: The VDOM ensures a consistent state of the UI by managing updates predictably.

Conclusion

The concepts of the Virtual DOM and reconciliation are at the heart of React's performance and efficiency. By understanding these concepts, you can build more efficient React applications. The Virtual DOM allows React to optimize updates, and the reconciliation process ensures that only necessary changes are made to the real DOM.

React's ability to manage the complexity of updating the UI efficiently is one of the reasons why it has become such a popular choice for building user interfaces. By leveraging the Virtual DOM and reconciliation, you can create fast, responsive, and efficient applications with ease.

Understanding Declarative Programming in React

Abhinav Singh — Sun, 30 Jun 2024 08:37:26 +0000

React is a popular JavaScript library used for building user interfaces, and one of its core principles is declarative programming. To understand why React is declarative, we first need to grasp what declarative programming is and how it contrasts with imperative programming.

Declarative vs. Imperative Programming

Imperative Programming

Imperative programming is a programming paradigm where you explicitly describe the steps your program must take to achieve a desired state. In other words, you tell the computer how to do something.

Example of Imperative Programming:

Let's say we want to create a list of numbers from 1 to 5 and print them.

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

In this example, you:

Create an array of numbers.
Use a loop to iterate through each number.
Print each number.

You specify how the task should be done step by step.

Declarative Programming

Declarative programming, on the other hand, is a paradigm where you describe what you want to achieve without explicitly outlining the steps to get there. You focus on the end result rather than the process.

Example of Declarative Programming:

Using the same task of printing numbers from 1 to 5, the declarative approach might look like this:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));

In this example, you:

Create an array of numbers.
Use the forEach method to print each number.

You describe what you want to do (print each number) without specifying the underlying steps (the iteration process).

React and Declarative Programming

React embraces declarative programming, especially in how we describe the UI. Instead of detailing how the UI should change, we describe what the UI should look like in a given state.

Example: Creating a Button in React

Imperative Approach:

Without React, you might use vanilla JavaScript to create a button and attach an event listener:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Imperative Example</title>
</head>
<body>
  <div id="app"></div>
  <script>
    const appDiv = document.getElementById('app');
    const button = document.createElement('button');
    button.innerText = 'Click Me';
    button.addEventListener('click', () => {
      alert('Button Clicked');
    });
    appDiv.appendChild(button);
  </script>
</body>
</html>

Here, you:

Select a div element to hold the button.
Create a button element.
Set the button's text.
Attach an event listener to the button.
Append the button to the div.

Declarative Approach with React:

With React, you declare what the UI should look like using JSX:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <button onClick={() => alert('Button Clicked')}>
      Click Me
    </button>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

In this example, you:

Define a component (App) that returns the button element.
Use JSX to describe the button and its event handler.
Render the App component into the app div.

React takes care of the underlying DOM manipulation. You focus on describing what the UI should look like based on the application's state.

Benefits of Declarative Programming in React

Simpler Code: Declarative code is often easier to read and understand because it focuses on the "what" rather than the "how."
Maintainability: Changes are easier to manage and reason about since you modify descriptions of UI states rather than procedural steps.
Reusability: Components can be reused across different parts of the application, promoting code reuse and consistency.

Conclusion

React's declarative nature allows developers to write more intuitive and manageable code by describing what the UI should look like in different states. By understanding the differences between declarative and imperative programming, you can appreciate why React's approach leads to cleaner and more efficient code.

State Management in React: A Comprehensive Guide

Abhinav Singh — Fri, 28 Jun 2024 03:27:33 +0000

State management is a critical aspect of building scalable and maintainable applications in React. As applications grow in complexity, managing the state efficiently becomes more challenging. This blog aims to provide a comprehensive guide to state management in React, covering various techniques, patterns, and tools with detailed explanations and examples.

1. Introduction to State in React

State in React refers to a set of variables that determine how a component renders and behaves. State is mutable, meaning it can change over time, causing the component to re-render. Proper state management ensures that the UI remains consistent and responsive to user interactions.

React provides several ways to manage state:

Local state within a component
Shared state using Context API
Global state management with third-party libraries

Understanding when and how to use each method is crucial for building efficient React applications.

2. Local State Management

useState Hook

The useState hook is the most basic and commonly used way to manage state in functional components. It allows you to add state to function components and is straightforward to use.

Example:

import React, { useState } from 'react';

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

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

export default Counter;

In this example, useState initializes the state variable count with a value of 0. The setCount function updates the state, causing the component to re-render with the new value.

useReducer Hook

The useReducer hook is an alternative to useState for more complex state logic. It is similar to the Redux pattern and can be beneficial when managing state transitions based on specific actions.

Example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

The useReducer hook takes a reducer function and an initial state as arguments. The reducer function defines how the state should be updated based on the action dispatched.

3. Context API

The Context API is used for sharing state across multiple components without passing props down manually at every level. It is particularly useful for global state or theme settings.

Creating and Using Context

Example:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

In this example, ThemeContext is created using createContext. The ThemeProvider component uses the ThemeContext.Provider to pass down the state and updater function. ThemedComponent consumes the context using the useContext hook.

4. Third-Party State Management Libraries

Redux

Redux is a popular state management library that provides a predictable state container. It is widely used for large-scale applications due to its strict unidirectional data flow and middleware support.

Example:

Install Redux and React-Redux:

   npm install redux react-redux

Create a Redux Store:

   // store.js
   import { createStore } from 'redux';

   const initialState = { count: 0 };

   function reducer(state = initialState, action) {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }

   const store = createStore(reducer);

   export default store;

Connect Redux to React:

   // App.js
   import React from 'react';
   import { Provider, useSelector, useDispatch } from 'react-redux';
   import store from './store';

   function Counter() {
     const count = useSelector((state) => state.count);
     const dispatch = useDispatch();

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   }

   function App() {
     return (
       <Provider store={store}>
         <Counter />
       </Provider>
     );
   }

   export default App;

In this example, store.js contains the Redux store configuration. App.js connects the Redux store to the React application using the Provider component. The Counter component uses useSelector to access the state and useDispatch to dispatch actions.

Best Practices

Keep State Local as Much as Possible: Only lift state when necessary. Local state is simpler and more performant.
Use Context API Sparingly: Context API is great for global state, but overuse can lead to performance issues. Use it for theme, authentication, or other truly global states.
Choose the Right Tool: Evaluate the complexity of your application and choose the state management solution that fits best. Redux is powerful for large applications, while Zustand or MobX might be more suitable for smaller ones.
Organize Your State: Keep related state together and avoid scattering state across the application. This improves maintainability and readability.
Normalize State: For large applications, normalize state to avoid duplication and make updates more efficient.
Use Memoization: Use React.memo, useMemo, and useCallback to optimize performance by memoizing components, values, and functions.
Write Clean and Maintainable Code: Follow best practices for code quality, including proper naming conventions, documentation, and separation of concerns.

Conclusion

State management is a crucial aspect of building React applications. By understanding and applying the appropriate state management techniques and tools, you can create scalable, maintainable, and performant applications. Whether you choose the built-in hooks like useState and useReducer, the Context API, or third-party libraries like Redux, MobX, Zustand, or Recoil, each approach has its strengths and use cases.

Remember to evaluate the needs of your application and choose the solution that best fits your requirements. By following best practices and continuously learning, you can master state management in React and build robust applications.

Happy coding!

Essential JavaScript topics to master before diving into React

Abhinav Singh — Mon, 24 Jun 2024 09:14:13 +0000

Welcome, budding React developers! Before you dive headfirst into the ocean of React, it's crucial to ensure your JavaScript life raft is well-equipped. While React makes building user interfaces a breeze, it assumes you have a solid grounding in JavaScript. Here’s a comprehensive guide to the essential JavaScript topics you need to master before embarking on your React journey.

1. Variables and Data Types

JavaScript variables are like the drawers in your coding kitchen where you store your ingredients (data). Understanding how to properly declare and use them is fundamental.

Example:

// Using let and const
let myName = "Abhinav";
const myAge = 21;

// Data types
let isStudent = true; // Boolean
let skills = ["JavaScript", "React", "Django"]; // Array
let address = { city: "Bhopal", state: "MP" }; // Object

2. Functions

Functions are the bread and butter of JavaScript. Understanding the different ways to declare functions and their scope is vital.

Example:

// Function Declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Function Expression
const greet = function(name) {
  return `Hello, ${name}!`;
}

// Arrow Function
const greet = (name) => `Hello, ${name}!`;

// Immediately Invoked Function Expression (IIFE)
(function() {
  console.log("IIFE runs immediately!");
})();

3. Scope and Closures

Scope determines the accessibility of variables, while closures allow functions to access variables from an enclosing scope even after that scope has finished execution.

Example:

function outerFunction() {
  let outerVar = "I am outside!";

  function innerFunction() {
    console.log(outerVar); // "I am outside!"
  }

  return innerFunction;
}

const inner = outerFunction();
inner();

4. Asynchronous JavaScript

JavaScript’s single-threaded nature requires a good understanding of asynchronous operations to handle tasks like data fetching. This includes callbacks, promises, and async/await.

Example:

// Callback
setTimeout(() => {
  console.log("Callback after 2 seconds");
}, 2000);

// Promise
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // "Data fetched!"
});

// Async/Await
const fetchDataAsync = async () => {
  const data = await fetchData;
  console.log(data); // "Data fetched!"
};

fetchDataAsync();

5. The DOM (Document Object Model)

Manipulating the DOM is key to making web pages interactive. Understanding how to select and manipulate DOM elements is crucial.

Example:

// Selecting elements
const button = document.querySelector('button');
const div = document.getElementById('myDiv');

// Manipulating elements
button.addEventListener('click', () => {
  div.textContent = "Button Clicked!";
  div.style.color = 'red';
});

6. Event Handling

Events are actions that occur in the browser, like clicks or keypresses. Handling these events properly is fundamental for interactive web applications.

Example:

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button was clicked!');
});

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('Enter key was pressed.');
  }
});

7. Object-Oriented Programming (OOP)

While JavaScript is a prototype-based language, it supports object-oriented programming principles like classes and inheritance.

Example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const abhinav = new Person('Abhinav', 21);
abhinav.greet();

8. The `this` Keyword

The context of this can be tricky but is essential for mastering JavaScript, especially when working with objects and classes.

Example:

const person = {
  name: 'Abhinav',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // "Hello, my name is Abhinav."

// Arrow function and this
const personArrow = {
  name: 'Abhinav',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`); // `this` is not bound in arrow functions
  }
};

personArrow.greet(); // "Hello, my name is undefined."

9. Arrays and Array Methods

Arrays are a core data structure in JavaScript. Knowing how to manipulate them with methods like map, filter, and reduce is crucial.

Example:

const numbers = [1, 2, 3, 4, 5];

// Map
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Filter
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

// Reduce
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

10. Destructuring

Destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Example:

// Array Destructuring
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

// Object Destructuring
const person = {
  name: 'Abhinav',
  age: 21
};

const { name, age } = person;
console.log(name, age); // "Abhinav" 21

11. Spread and Rest Operators

The spread and rest operators (...) are powerful tools for working with arrays and objects.

Example:

// Spread Operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

// Rest Operator
function sum(...args) {
  return args.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6

12. Template Literals

Template literals make string interpolation and multi-line strings a breeze.

Example:

const name = 'Abhinav';
const greeting = `Hello, my name is ${name}.`;
console.log(greeting); // "Hello, my name is Abhinav."

13. Modules

Modules are a way to organize and reuse code. Understanding import and export is key to managing larger codebases.

Example:

// module.js
export const name = 'Abhinav';
export function greet() {
  console.log(`Hello, ${name}!`);
}

// main.js
import { name, greet } from './module.js';
console.log(name); // "Abhinav"
greet(); // "Hello, Abhinav!"

14. Error Handling

Proper error handling is essential for building robust applications.

Example:

try {
  throw new Error('Something went wrong!');
} catch (error) {
  console.error(error.message); // "Something went wrong!"
} finally {
  console.log('This will run regardless.');
}

15. Fetch API

The Fetch API provides a modern, promise-based way to make asynchronous requests.

Example:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Conclusion

Mastering these essential JavaScript topics will not only make your transition to React smoother but also empower you to tackle more complex projects with confidence. So, roll up your sleeves, get your hands dirty with JavaScript, and then dive into the exciting world of React!

Happy coding!

React as a Library and Create React App / Vite as Frameworks

Abhinav Singh — Sun, 23 Jun 2024 12:13:50 +0000

React stands out as one of the most popular libraries for building user interfaces. However, when it comes to scaffolding a new project, developers often turn to tools like Create React App (CRA) or Vite. While React is a library focused on the view layer, CRA and Vite act as frameworks, providing the necessary tooling and conventions to streamline the development process. This article explores the distinction between React as a library and Create React App or Vite as frameworks, elucidating their roles, benefits, and examples.

React: The Library

React is a JavaScript library developed by Facebook for building user interfaces, particularly single-page applications. Its core philosophy is centered around components—reusable, independent pieces of UI. React's primary job is to render UI components and manage their state efficiently.

Key Features of React

Component-Based Architecture:
React encourages developers to build applications using components. Each component represents a part of the user interface and can manage its own state and lifecycle.
Virtual DOM:
React uses a virtual DOM to improve performance. It minimizes direct manipulation of the actual DOM by batching updates and applying the minimum number of changes.
Declarative Syntax:
React allows developers to describe what the UI should look like at any given point in time. This declarative nature makes it easier to understand and debug.
Unidirectional Data Flow:
React promotes a unidirectional data flow, which simplifies data management and makes the application state more predictable.

Example: Basic React Component

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

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

export default App;

In the above example, we define a simple React component that maintains a counter state and provides a button to increment it. React's power lies in its simplicity and reusability.

Create React App and Vite: The Frameworks

While React itself is just a library, starting a new project from scratch can be cumbersome without additional tools. This is where frameworks like Create React App and Vite come into play. These tools provide a structured environment to develop React applications, handling the complexities of build configuration, asset management, and development server setup.

Create React App (CRA)

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. Under the hood, CRA uses Webpack and Babel to bundle and transpile code.

Key Features of CRA

Zero Configuration:
CRA abstracts away the build configuration, allowing developers to focus on writing code without worrying about setup details.
Development Server:
CRA provides a development server with hot module replacement, enabling a smooth development experience.
Testing Setup:
CRA comes with a built-in testing setup using Jest, making it easier to write and run tests.
Optimized Production Build:
CRA optimizes the production build for better performance and smaller bundle sizes.

Example: Creating a New React App with CRA

npx create-react-app my-app
cd my-app
npm start

After running these commands, CRA generates a new React application with a predefined structure and configuration. Developers can immediately start building their applications without dealing with the underlying build tools.

Vite

Vite is a next-generation front-end tooling framework that aims to provide a faster and leaner development experience. It is designed to leverage the native ES modules in the browser, allowing instant server start and fast hot module replacement.

Key Features of Vite

Fast Server Start:
Vite starts the development server instantly, even for large projects.
Hot Module Replacement (HMR):
Vite provides lightning-fast HMR, ensuring changes reflect immediately in the browser.
Optimized Build:
Vite uses Rollup for production builds, offering efficient code splitting and optimization.
Flexible and Extensible:
Vite is highly configurable and can be extended with plugins to suit different project needs.

Example: Creating a New React App with Vite

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

These commands create a new React application using Vite. The development server starts almost instantly, providing a seamless development experience.

Detailed Code Examples

React Component with Create React App

Let's explore a more detailed example of a React component created with Create React App. This example includes a form that captures user input and displays it dynamically.

Initialize the Project

npx create-react-app user-form-app
cd user-form-app
npm start

Create a UserForm Component

// src/components/UserForm.js
import React, { useState } from 'react';

function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`User Info: \nName: ${name}\nEmail: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UserForm;

Use the UserForm Component in App

// src/App.js
import React from 'react';
import UserForm from './components/UserForm';

function App() {
  return (
    <div>
      <h1>User Form</h1>
      <UserForm />
    </div>
  );
}

export default App;

In this example, Create React App handles the project setup, allowing us to focus on developing the components and functionality.

React Component with Vite

Now, let's create a similar example using Vite.

Initialize the Project

npm create vite@latest user-form-app --template react
cd user-form-app
npm install
npm run dev

Create a UserForm Component

// src/components/UserForm.jsx
import React, { useState } from 'react';

function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`User Info: \nName: ${name}\nEmail: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UserForm;

Use the UserForm Component in App

// src/App.jsx
import React from 'react';
import UserForm from './components/UserForm';

function App() {
  return (
    <div>
      <h1>User Form</h1>
      <UserForm />
    </div>
  );
}

export default App;

In this Vite example, the development server starts instantly, and changes reflect immediately due to Vite's fast HMR.

Conclusion

React, as a library, provides the fundamental building blocks for creating user interfaces through its component-based architecture, virtual DOM, and declarative syntax. However, to streamline the development process, tools like Create React App and Vite act as frameworks that offer a structured environment with build configuration, development servers, and optimization capabilities.

Create React App simplifies project setup with zero configuration, making it a great choice for developers who want a ready-to-use environment. On the other hand, Vite offers a faster, more flexible development experience, leveraging native ES modules and providing instant server start and fast HMR.

By understanding the distinction between React as a library and CRA or Vite as frameworks, developers can make informed choices about their development tools, ultimately leading to more efficient and enjoyable development experiences.

Debouncing- A Saver !

Abhinav Singh — Thu, 20 Jun 2024 18:42:08 +0000

Debouncing is a fundamental technique in JavaScript that improves performance by limiting the number of times a function is executed. It's particularly useful in scenarios where rapid events (like scrolling or typing) trigger callback functions that might cause performance issues if executed too frequently. In this guide, we'll explore what debouncing is, why it's important, how it works, and provide practical examples to help you master this essential concept.

1. Introduction to Debouncing

In the world of JavaScript programming, managing event handlers efficiently is crucial for maintaining smooth user experiences and optimizing performance. Debouncing is a technique used to control how many times a function gets called over time. It ensures that functions bound to events like scroll, resize, or input are only executed after a specified period of inactivity, thus preventing them from being called excessively.

2. Understanding Debouncing

To understand debouncing better, let's delve into its core concept:

How Debouncing Works

Imagine you have a scenario where a user is typing into an input field, and you want to perform a search operation based on their input. Without debouncing, the search function would trigger with every keystroke, potentially overwhelming the server with requests or causing unnecessary recalculations.

Debouncing solves this problem by introducing a delay before executing the function. If another event of the same type occurs within the delay period, it resets the timer. This way, the function only fires once the user has stopped typing for the specified duration.

Benefits of Debouncing

Performance Optimization: Reduces the number of function executions, improving overall performance, especially in resource-intensive applications.
Control Over Event Handling: Ensures that actions triggered by events like scrolling or resizing are handled in a controlled and predictable manner.
Preventing Unnecessary Operations: Minimizes unnecessary computations or API requests that could occur from rapid, successive events.

3. Implementing Debouncing

Simple Debouncing Example

Let's walk through a basic implementation of debouncing in JavaScript:

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// Usage example
const searchInput = document.getElementById('search-input');
const search = debounce(function() {
  // Perform search operation here
  console.log('Searching for:', searchInput.value);
}, 300);

searchInput.addEventListener('input', search);

Explanation:

debounce(func, delay): This is a higher-order function that takes a function func and a delay delay as parameters.
clearTimeout(timer): Resets the timer every time the event is triggered within the delay period.
setTimeout: Invokes the function func after delay milliseconds of inactivity.

Advanced Use Cases

Debouncing can be applied to various scenarios beyond simple input events. For instance, you might debounce window resize events to optimize layout recalculations or debounce API calls to prevent excessive requests during user interactions.

// Debouncing window resize event
window.addEventListener('resize', debounce(function() {
  console.log('Window resized');
}, 500));

// Debouncing API calls
const fetchData = debounce(async function(query) {
  const response = await fetch(`https://api.example.com/search?q=${query}`);
  const data = await response.json();
  console.log('Fetched data:', data);
}, 1000);

4. Practical Applications

Debouncing User Input

One of the most common applications of debouncing is in handling user input effectively, especially in search bars or form fields where immediate feedback or live search results are desired without overwhelming backend services.

const userInput = debounce(function() {
  // Validate or process user input
  console.log('User input:', userInput.value);
}, 200);

document.getElementById('user-input').addEventListener('input', userInput);

Handling Window Resize Events

Debouncing window resize events ensures that layout calculations or responsive adjustments are performed efficiently, avoiding multiple recalculations during rapid resizing.

window.addEventListener('resize', debounce(function() {
  console.log('Window resized');
}, 300));

Optimizing Network Requests

Debouncing API requests is crucial for scenarios where user interactions trigger server-side operations, such as autocomplete suggestions or fetching data based on user input.

const fetchData = debounce(async function(query) {
  const response = await fetch(`https://api.example.com/search?q=${query}`);
  const data = await response.json();
  console.log('Fetched data:', data);
}, 500);

document.getElementById('search-input').addEventListener('input', function() {
  fetchData(this.value);
});

5. Comparing Debouncing and Throttling

While debouncing and throttling are both techniques used to improve performance in event-driven scenarios, they serve different purposes:

Debouncing delays invoking a function until after a certain period of inactivity.
Throttling limits the number of times a function can be called within a specified time interval.

Choose debouncing when you want to ensure that a function is only executed after a pause in events, whereas throttling is preferable for limiting the rate of execution of a function to a fixed interval.

6. Conclusion

In conclusion, debouncing is a powerful technique in JavaScript for managing event handlers effectively, optimizing performance, and ensuring a smooth user experience. By understanding its principles and applying it to relevant scenarios like user input handling, window resizing, or network requests, you can significantly enhance the responsiveness and efficiency of your applications.

Mastering debouncing requires practice and experimentation to find the optimal delay for different use cases. Start integrating debouncing into your projects today to witness firsthand its impact on performance and user satisfaction.

Now that you have a solid understanding of debouncing, experiment with it in your own projects and explore how it can elevate the functionality and efficiency of your JavaScript applications!

Forem: Abhinav Singh

Video Calls Are Harder Than They Look (Thanks, NAT!)

But before starting, let's read some of the definitions that can be useful in this blog.

Bandwidth:

Bandwidth vs Internet Speed

Bitrate:

Example with Video Call

Simple Analogy

Bandwidth vs Bitrate

NAT:

SFU = Selective Forwarding Unit

How Video Streaming Works in Video Calls

Deployment Challenges in Production

What is a STUN Server?

What is a TURN Server?

STUN vs TURN: What’s the Difference?

Simple Analogy

Flow of STUN/TURN in a Video Call

Flow Summary in One Line

Bandwidth and Bitrate Calculations

Example: A 4-person call at 720p

Local vs Production Video Calling App

Key Takeaways

The Most Underrated Tech Skill

The Comfort Trap of Courses

Why Docs Are the Real Superpower

How Courses Should Evolve

Final Thoughts

AntD and Shad CN: Why Waste Time Being Creative When You Can Just Copy-Paste?

AntD and Shad CN: Why Waste Time Being Creative When You Can Just Copy-Paste?

Introduction

The Rise of AntD and Shad CN

Pre-Built Components

Accessibility and Community Support

The Copy-Paste Mentality

The Risks of Copying

Creativity vs. Productivity

Balancing Both Worlds: Creativity and Efficiency

Customizable Components

Hybrid Approach

Conclusion

React.js vs Next.js: A Detailed Comparison

Introduction to React.js

Key Features of React.js:

Introduction to Next.js

Key Features of Next.js:

Key Differences Between React.js and Next.js

Rendering Modes

Key Takeaway:

File-Based Routing vs Component-Based Routing

Key Takeaway:

Server-Side Rendering (SSR) Support

Key Takeaway:

Performance and Optimization

Key Takeaway:

SEO Support

Key Takeaway:

Ease of Setup

Key Takeaway:

Deployment

Key Takeaway:

When to Use React.js

When to Use Next.js

Conclusion

Mastering `setTimeout` and `setInterval` in JavaScript

The Basics of setTimeout

What is setTimeout?

Syntax of setTimeout

Example: A Simple setTimeout

The Basics of setInterval

What is setInterval?

Syntax of setInterval

Example: A Simple setInterval

Clearing Timers

clearTimeout

clearInterval

Advanced Usage with Examples

Passing Arguments to Functions

Nested setTimeout for Recurring Tasks

Story: A Digital Kitchen Timer

The Basics of `setTimeout`

What is `setTimeout`?

Syntax of `setTimeout`

Example: A Simple `setTimeout`

The Basics of `setInterval`

What is `setInterval`?

Syntax of `setInterval`

Example: A Simple `setInterval`

`clearTimeout`

`clearInterval`

Nested `setTimeout` for Recurring Tasks

Using `async` and `await` with `setTimeout`

Example: Wrapping `setTimeout` in a Promise

Using `async` and `await` with `setInterval`

Example: Simulating `setInterval` with `async` and `await`

8. The `this` Keyword