Blog

My writings


import BlogLayout from '@/components/BlogLayout';
import BlogTip from '@/components/BlogTip';
import Layout from '@/components/Layout';
import MarkdownExternalLink from '@/components/MarkdownExternalLink';
import ReactEditor from '@/components/ReactEditor';
import Image from '@/components/Image';
import Zoom from 'react-medium-image-zoom';

export const data = {
    date: '2024-03-06',
    title: 'Garbage Collection in JavaScript: Explained in Simple Words',
    description:
        'In this short article, learn how JavaScript in your browser smartly handles garbage collection (using a Depth-First Search algorithm) to keep your applications running smoothly.',
    image: '/images/blog/garbage-collection-javascript.png',
    category: 'JavaScript'
};

        <Layout metaTitle={data.title} metaDescription={data.description} ogImage={data.image}>

<BlogLayout data={data}>

**Garbage collection in JavaScript**, or in any programming language that uses it, is like a magic piece of code that cleans up the memory your program no longer needs. This is especially important in languages like JavaScript, where developers do not manually allocate and free memory, unlike some other languages like C/C++. This is handled automatically in JavaScript by the JavaScript Engine (<i>a software that executes JavaScript code, such as browsers</i>). Let's break it down with a simple party example 🍷.

## What is Garbage Collection

Imagine you're at a party, and guests are constantly arriving and leaving. Over time, some guests linger, not really participating, just taking up space. In computer terms, your program's memory is the party room, and the guests are various data objects your program creates. **Garbage collection is the process of clearing out those "lingering guests" to make room for new ones, ensuring the party (your program) continues without a hitch.** Chrome's Javascript engine (also called V8) uses a smart algorithm called **"Mark and Sweep"** to do this, which we'll discuss in a while.

## How Websites Use Memory

When you visit a website, your browser loads the HTML, CSS, and JavaScript files that make up the page. As the JavaScript code runs, it creates variables, objects, and data structures that take up memory. For example, let's say you have a simple script that creates an array of numbers:

```javascript
let numbers = [1, 2, 3, 4, 5];
```

This line of code allocates memory to store the array and its contents. Now imagine if this script kept creating new arrays without ever releasing the memory used by the old ones. Over time, the website would use up more and more memory, potentially slowing down or even crashing the browser.

## Why Memory Cleaning is Needed

Memory cleaning, or garbage collection, is crucial for several reasons:

-   <strong>Limited Resources</strong>: Computers have a finite amount of
    memory. While modern devices come with substantial RAM, inefficient memory
    usage can still lead to problems, especially on devices with less memory or
    when many applications are running simultaneously.

-   <strong>Performance</strong>: Applications that use memory efficiently tend
    to run faster and more smoothly. Excessive memory usage can lead to longer
    load times, sluggish response to user input, and, in severe cases, browser
    crashes.

-   <strong>Leaks and Bloat</strong>: Without proper memory cleaning, a website
    can continue to consume more and more memory as it runs. This is known as a
    memory leak. Over time, even the most minor leaks can add up, causing
    significant performance degradation and a poor user experience.

## Mark and Sweep algorithm

To prevent memory from overflowing, JavaScript engines use an automated garbage collection algorithm called **"mark and sweep"**. Here's how it works:

-   The garbage collector starts by identifying all the "roots" - variables and objects that are directly referenced by the program.
-   It then follows the references from these roots to other objects, marking each one as it goes. <u>**This is called the "mark" phase.**</u> Think of it as going through the room (memory) and putting a sticker on all guests (data objects) who are actively participating or are connected to the main group. It starts with the most obvious participants (root objects) and then marks anyone they are directly interacting with. This marking continues, creating a chain of active participants.
-   Once all reachable objects have been marked, <u>**the garbage collector (GC) begins the "sweep" phase.**</u> It scans through the memory and frees up any objects that were not marked. In our party example, think of it as, after everyone who should be at the party is marked, the sweep phase begins. Now, it's time to gently guide those without stickers (unmarked data objects) to the exit, clearing up space in the room. These unmarked objects are considered "garbage" and are removed from memory.

Let's understand these with a code snippet.

<small className="opacity-70">
    Please note that this is a representation of the algorithm and not the
    actual code used in the V8 engine. The actual implementation is much more
    complex and optimized for performance.
</small>
```javascript
// Function to simulate the "Mark" phase of garbage collection using DFS
function mark(root) {
    if (root === null || root.isMarked) {
        return; // If the object is null or already marked, stop the traversal
    }
    root.isMarked = true; // Mark the current object as reachable
    for (let key in root) {
        if (typeof root[key] === 'object') {
            mark(root[key]); // Recursively mark reachable objects
        }
    }
}
// Function to simulate the "Sweep" phase
function sweep(objects) {
    // Filter out null objects and unmarked (and thus unreachable) objects
    return objects.filter((obj) => obj !== null && obj.isMarked);
}
```

The code provided is a basic version of the mark-and-sweep garbage collection algorithm. It marks reachable objects through a depth-first search with the mark function and then removes unmarked objects using the sweep function, which scans a collection of objects for those without the `isMarked` property.

The "Sweep" phase differs from "Mark" in that it doesn't traverse the object graph but simply scans the heap (or a collection of objects, in this case), collecting or filtering out objects deemed unreachable, based on their marked status.

Now, let us imagine a piece of JavaScript code on our browser and see how the mark and sweep algorithm would work in a real scenario.

```javascript
// Example code
let person = {
    name: 'John',
    age: 30
};

let job = {
    title: 'Developer',
    company: 'Acme Inc.'
};

// Link person to job
person.job = job;

// Simulate removing the reference to 'person'
person = null;

// Start marking from the root (assuming 'job' is a root object)
mark(job);

// Assuming we have an array of all objects in our environment. In a real scenario, the Garbage Collector (GC) would have access to all objects in the heap.
let allObjects = [person, job];

// Simulate garbage collection
let objectsAfterGC = sweep(allObjects);

// Assuming 'person' is not reachable anymore and would be collected by GC in a real scenario
console.log(objectsAfterGC); // This should only include 'job' as it is still reachable
```

#### Code Explanation

Under the hood, the garbage collector uses a **depth-first search (DFS) algorithm** to traverse the object graph and mark reachable objects. DFS is a common graph traversal algorithm that explores as far as possible along each branch before backtracking.

In the above code, we start with two objects, person and job, which are both reachable from the root. We then set person's job property to reference the job object. Finally, we set person to null, meaning it is no longer reachable. At this point, the garbage collector will mark person as eligible for collection, but job will remain since it is still reachable.

All this is handled automatically by the JavaScript engine.

<BlogTip className="bg-green-500">
    **Note:** Feel free to copy and paste the code snippets into your browser's
    console to see the results for yourself.
</BlogTip>

### Further Optimizations in Chrome V8 Engine

On top of this, the V8 engine employs a clever strategy known as **generational collection**, based on the observation that most objects die young. It segregates objects into two generations: **young (new space) and old (old space)**. New objects are allocated in a special area and are subject to more frequent cleanups. If they survive these early cleanups, they "move" to the old generation, where they enjoy a longer, more stable existence. This strategy is like having a VIP section at the party for guests who stick around longer, thus making the cleaning process more focused and efficient. Refer to the future readings below to learn more about garbage collection in V8.

### Incremental Marking and Lazy Sweeping

To avoid disrupting the program too much, V8 also introduces **incremental marking and lazy sweeping**. Incremental marking is like cleaning up in small intervals throughout the party, rather than waiting until the end. Lazy sweeping takes this a step further by delaying the cleanup until the space is actually needed, reducing the workload and keeping the party going without noticeable interruptions.

## Future readings

-   <MarkdownExternalLink
        title="Garbage Collection in JavaScript"
        link="https://javascript.info/garbage-collection"
    />
-   <MarkdownExternalLink
        title="A tour of V8: Garbage Collection"
        link="https://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection"
    />
-   <MarkdownExternalLink
        title="Memory Management in V8"
        link="https://v8.dev/blog/trash-talk"
    />

### Conclusion

Understanding the **"Mark and Sweep"** garbage collection process in JavaScript, especially within the V8 engine, unveils the intricate yet essential mechanisms that keep our browsers running efficiently.

So, the next time your web application runs smoothly, remember the unsung hero behind the scenes: **the garbage collector**, diligently working to ensure a seamless experience.

<hr />
If this article helped you, consider it sharing with your friends and colleagues.
If you have any questions or feedback, feel free to comment down below. Happy coding!
🚀

</BlogLayout> 
</Layout>
 
{/* prettier-ignore */}


Garbage Collection in JavaScript: Explained in Simple Words


import BlogLayout from '@/components/BlogLayout';
import BlogTip from '@/components/BlogTip';
import Layout from '@/components/Layout';
import MarkdownExternalLink from '@/components/MarkdownExternalLink';
import ReactEditor from '@/components/ReactEditor';
import Image from '@/components/Image';
import Zoom from 'react-medium-image-zoom';

export const data = {
    date: '2024-02-11',
    title: 'A/B Testing at Scale: How We Engineered a Solution for Millions of Users with AWS',
    description:
        'Learn how we engineered a solution at Unacademy to conduct split A/B tests for a web application serving over 50 million users, without compromising on user experience and with minimal impact on performance.',
    image: '/images/blog/scaling-ab-tests.png',
    category: 'Serverless, Frontend',
    featured: {
        link: 'https://react.statuscode.com/issues/381',
        label: 'Featured in React Status Newsletter #381'
    }
};

        <Layout metaTitle={data.title} metaDescription={data.description} ogImage={data.image}>

<BlogLayout data={data}>

<MarkdownExternalLink title="Unacademy" link="https://unacademy.com/about" /> is
a unicorn tech startup and India's largest online learning platform, boasting over
50 million users. It has attracted investors such as Meta, Sequoia, and Tiger Global.
As a Software Engineer in the Web Platform Team at Unacademy, I've had the privilege
of working on some challenging problems at scale. Let us look at one of them which
was particularly interesting: **A/B Testing at Scale**.

Let's start with the basics. If you're new to this topic, I'm sure you'll learn something new by the end of this article. Feel free to skip ahead if you're already familiar with the concepts, but I highly recommend checking out the interactive demo.

## Basics of A/B Testing

### What is A/B testing?

A/B testing is like a science experiment for websites or apps. Imagine you have two versions of a webpage, A (known as Control variant) and B (known as Test variant). Version A might have a green button, and version B has a red button. You want to know which color button more people will click on.

So, you show version A to some of your visitors and version B to others. Then you watch and see which version gets more clicks. If more people click the green button on version A, you might decide to use the green button for everyone because it seems to work better.

In simple words, A/B testing is a way to compare two versions of something to see which one does a better job.

<BlogTip>
    Fun Fact: As we speak, companies like Amazon, Netflix, and Instagram are
    quietly running A/B tests, shaping your experience without you even
    realizing it.
</BlogTip>

### Can I see it in action?

Yes, get ready to be amazed! 🤩 I've added what I call the **'Playground'—an interactive code editor for React**, running directly in your browser in real-time without a backend server.

#### Playground: A/B Test in React

Try hitting the refresh button multiple times to see if you encounter a different variant each time.

    <ReactEditor options={{editorHeight:400}} files={{
        '/App.js': `import React, { useState, useEffect } from 'react';

const ABTest = () => {
// State to hold which variant to show
const [variant, setVariant] = useState('');

useEffect(() => {
// Randomly choose a variant on component mount
const variants = ['A', 'B'];
const selectedVariant = variants[Math.floor(Math.random() * variants.length)];
setVariant(selectedVariant);
}, []);

return (

<div>
    {variant === 'A' && <VariantA />}
    {variant === 'B' && <VariantB />}
</div>
); };

export default ABTest;

const VariantA = () => <>

<h1>
    Wow! You're in the 50% of the people in the world seeing{' '}
    <span style={{ color: 'royalblue' }}>Variant A.</span>
</h1>
<p>Try hitting the refresh button on the bottom, multiple times.</p>

</>;

const VariantB = () => <>

  <h1>
    Yay! You're in the 50% of the people in the world seeing{" "}
    <span style={{ color: "green" }}>Variant B.</span>
  </h1>
  <p>Try hitting the refresh button on the bottom, multiple times.</p>
  
</>;
`,
}}/>

### Wow, why is it useful?

This is great for businesses because:

-   **Improves Customer Experience**: By testing different options, businesses can find out what their customers prefer and make their websites or products more enjoyable to use.
-   **Increases Sales**: If a business knows which version of a webpage leads to more sales or sign-ups, they can use that version for everyone, potentially making more money.
-   **Reduces Risks**: Before making big changes, like redesigning a website, businesses can test small changes to see how people react. This way, they avoid making big investments that might not pay off.
-   **Informs Decisions**: Instead of relying on gut feelings, businesses can make informed decisions that are backed up by actual user behavior.

Hence, A/B testing helps businesses understand what works best, leading to happier customers and more sales.

<BlogTip className="bg-green-500">
    <u>The Button That Made Millions:</u> Amazon found that by making their
    website just 1 second faster, sales increased by 1%. This is a
    classic example of how seemingly minor changes tested through A/B testing
    can lead to significant financial gains.
{/* 
<div style={{ fontSize: '0.7em' }}>
    shush, web performance blog coming next :)
</div> */}

</BlogTip>

### And, how does it work?

As you can see in the code above, we simply used the `Math.random() on line 10` function to determine which variant to show you. It's as simple as that to keep the process as fair as possible.

In the industry, companies may use a similar random function to determine user buckets or rely on third-party services that achieve the same result. Once a user has been assigned to a specific bucket (say, Variant A), they must always see the content for Variant A, even on page refresh. They should never see content from any other variant until the experiment is concluded.

## Developing A/B tests

For this article, we will consider that the frontend is built using a SPA framework like React, but the concepts remain the same, regardless of the frontend stack.

### Old School Approach (Traditional)

<Zoom>
    <Image
        src={'/images/blog/scaling-ab-tests/01.png'}
        height={700}
        width={800}
    />
</Zoom>

In this approach, when a user visits a website, their bucketing is done on the client-side or via a backend API. A variable is then set in their browser's `localStorage` to determine which variant they should see. This value is subsequently used to ensure the user sees the same variant on future visits.

#### Playground: A/B Test causing Flash of Unstyled Content (FOUC)

Try refreshing the playground, and you'll notice you see the same variant every time, but with a "loading..." flash. If you want to view your `localStorage`, you can do so by inspecting the browser and going to the Application tab.

    <ReactEditor options={{editorHeight:400}} files={{
        '/App.js': `import React, { useState, useEffect } from 'react';

// Placeholder image URLs for demonstration
const imageUrlA = 'https://fakeimg.pl/150x150/0000FF/808080?text=Variant+A';
const imageUrlB = 'https://fakeimg.pl/150x150/FF0000/FFFFFF?text=Variant+B';

const VariantA = () => <img src={imageUrlA} alt="Variant A" />;
const VariantB = () => <img src={imageUrlB} alt="Variant B" />;

const ABTestComponent = () => {
const [variant, setVariant] = useState('loading');

useEffect(() => {
// Simulate reading from localStorage with a delay
setTimeout(() => {
const storedVariant = localStorage.getItem('userVariant') || (Math.random() < 0.5 ? 'A' : 'B');
localStorage.setItem('userVariant', storedVariant);
setVariant(storedVariant);
}, 500); // 500ms second delay to simulate a flicker effect
}, []);

return (

<div>
    {variant === 'loading' && <div>Loading variant...</div>}
    {variant === 'A' && <VariantA />}
    {variant === 'B' && <VariantB />}
</div>
); };

export default ABTestComponent;
`,
}}/>

#### Pros of this approach

This approach is fine in most cases but has it's cons in large-scale applications.

-   **Simplicity**: localStorage provides a straightforward API that's easy to use for storing and retrieving simple data, making it easy for developers.

-   **Persistence**: Data stored in localStorage remains between sessions, allowing web applications to remember information or user preferences even after the browser is closed and reopened.

#### Drawbacks of this approach

-   **Delay due to Hydration**: In SPAs, data from `localStorage` can influence the web-app using client-side JavaScript, only after hydration is complete. This results in a **Flash of Unstyled Content (FOUC)**, impacting the initial user experience. This effect is especially prominent if you're conducting A/B tests on the top of the landing page (above the fold).

> Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers.
>
> <cite>~ Dan Abramov (React core team member)</cite>

-   **Dip in Web Performance and SEO**: FOUC can also lead to a significant drop in web performance metrics, notably <MarkdownExternalLink title="Cumulative Layout Shift (CLS)" link="https://web.dev/articles/cls" />, which can negatively impact SEO and, consequently, the overall business.

The above playground simulates this behaviour by adding a delay to the `localStorage` read operation, which causes a flicker effect. Think of this, as the delay caused for the JavaScript to run due to hydration in SPAs, and then set the variant.

### New-age Approach ✨

Given that Unacademy had millions of visitors coming to its web application, we needed an approach that addressed the drawbacks related to SEO and web performance metrics.

Things we considered while designing the new approach:

-   We had to determine which variant each user would see before they even loaded the webpage, which could help us skip the whole hydration issue.

-   Because we use AWS Cloudfront, a CDN, to cache our pages, they're served straight from the cache without touching our servers. This meant we needed to sort out the user's variant before the request even made it to AWS Cloudfront.

-   Our logic needs to run efficiently for millions of users without experiencing any downtime.

Like with all tech solutions, every approach involves some trade-offs that we discuss below. We aimed to optimize for user experience and revenue, ensuring the best user experience with zero impact on revenue.

### Tech Architecture

<Zoom>
    <Image
        src={'/images/blog/scaling-ab-tests/03.png'}
        height={700}
        width={800}
    />
</Zoom>
We make use of something called a Serverless function, which you can think of as
code executing close to the user, but without the need for a server to run it. We
will utilize the power of **AWS Lambda@Edge**, a serverless compute service that
helps us achieve this.

Think of **AWS Lambda@Edge** like a vending machine for your favorite snack that's placed right next to your room, instead of you having to walk to the store. Whenever you want a snack, it's quickly available. Similarly, Lambda@Edge puts the code needed for a website or app to work right near the user, so everything loads faster and smoother, without needing a whole computer server set up by you.

I will guide you through this architecture with a simple example.

### Step 1: Setting up the Webpages

Let's say we're conducting A/B Tests on the `/home` route of our web application.

-   Create different versions of your webpage. This could be as simple as creating a new subroute, such as `/home/variant-b`. `/home` acts as the control group (default or Variant A), and `/home/variant-b` as the test group (Variant B). This setup is a one-time step.

-   Make the necessary changes in your components on `/home/variant-b` to reflect the new variant. For instance, you might change an image or color of a button.

-   Deploy to staging environment and test the new variant by visiting the URL directly. For instance, to test `/home/variant-b`, simply visit that URL to view the new variant.

Note:
This approach may lead to some code duplication, a trade-off we accept for the benefits it offers. This duplication can be minimized by developing components to be reusable across variants.

We accept this trade-off because A/B tests are typically short-term, and the duplicated page will be removed at the experiment's end.

### Step 2: Setting up AWS

If you're new to AWS Lambda@Edge, you can refer to the official AWS documentation in the next step.

-   Create a new behavior in AWS Cloudfront for `/home` and `/home/variant-b`, applying the same caching policies and settings as other pages, according to team requirements.

-   Deploy a new AWS Lambda@Edge function to the `/home` route as an **Viewer Request**. This allows us to intercept client requests.

-   Deploy another AWS Lambda@Edge function to the `/home` route as an **Viewer Response**. This enables us to set the cookie before sending the response back to the client.

-   Finally, deploy a third AWS Lambda@Edge function to the `/home/variant-b` route as an **Viewer Request**. This is used to redirect users back to the `/home` route if they access it directly.

<BlogTip className="bg-green-500">
    **Viewer Request**: These functions run before the request is sent to the origin server (in our case, the CDN). They can modify the request before it reaches the origin server.

    **Viewer Response**: These functions run after the request is sent from the origin server (in our case, the CDN). They can modify the response before it is sent back to the client.

</BlogTip>

### Step 3: Coding up the AWS Lambda@Edge Logic

##### Viewer Request Function on `/home` Route:

-   Implement logic to determine the user's variant. Check if the `variant` cookie already exists. If it does, proceed with that variant; otherwise, determine the variant.
-   This can be done using a random function or a third-party service. Ensure the third-party service is fast and reliable, as it could be a performance bottleneck.
-   Once the variant is determined, select the appropriate page from the CDN. Modify the origin to fetch from either `/home` or `/home/variant-b` based on the variant. This ensures users see `/home` in their browser URL, but the content varies.

##### Viewer Response Function on `/home` Route:

-   If the variant is already in the cookie, skip this step. Otherwise, set the variant in the cookie before sending it back to the client.

##### Viewer Request Function on `/home/variant-b` Route:

-   Redirect users to the `/home` route.

### AWS Official Documentation

If you're new to AWS Lambda@Edge, I recommend checking out the links below. They lead to the official AWS documentation for Lambda@Edge, offering a solid starting point.

Feel free to comment on this post if you have any questions. I'd be happy to help.

-   <MarkdownExternalLink
        title="What is Lambda@Edge - Everything you need to know (Youtube)"
        link="https://www.youtube.com/watch?v=Jxmhd2zI0II/"
    />
-   <MarkdownExternalLink
        title="Intro to A/B Testing with AWS Lambda@edge"
        link="https://aws.amazon.com/developer/application-security-performance/articles/a-b-testing/"
    />
-   <MarkdownExternalLink
        title="Examples of AWS Lambda@edge code for Viewer Request and Response"
        link="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-examples.html#lambda-examples-a-b-testing"
    />

<Zoom>
    <Image
        src={
            'https://d1.awsstatic.com/achrsouk/ab-testing-occasional.4eaf5f3758aa2d8813faaf2040d1986256c5f04e.png'
        }
        className="bg-white p-2"
        height={700}
        width={800}
    />
</Zoom>
<cite>source: AWS Developer Documentation</cite>

### Pros of this approach

-   Runs close to the user at edge locations, reducing latency.
-   No servers required, helping us scale to millions.
-   Guaranteed execution on every request, ensuring the user's variant is determined before it even reaches AWS Cloudfront.
-   Eliminates flash of unstyled content (FOUC) since the variant is determined before the page loads.

### Drawbacks of this approach

-   **Cost Implications**: AWS Lambda@Edge charges for each request and the time it takes to execute the function. However, according to our calculations, the cost is relatively low compared to the benefits it offers. Optimizing the logic and limiting execution to only the routes where an A/B test is active can further reduce costs.

-   **Code Duplication**: As discussed above, this approach may lead to some minor code duplication, a trade-off we accept for the benefits it offers. Remember to delete the duplicated code after the A/B test is concluded.

### Conclusion

This approach **helped our product teams significantly cut down feature launch times**, without impacting user experience or revenue. In fact, it helped us arrive at decisions earlier and with more confidence, **leading to a better user experience and increased revenue** 💪

<BlogTip className="bg-green-500">
**Fun Fact:** AWS Lambda@Edge can be used for more than just A/B testing. Use cases such as internationalization (showing different content based on geolocation), image optimization, and header modification fit perfectly with its capabilities.

</BlogTip>

That's pretty much it! Kudos if you've made it this far, and I hope this article helps you learn how to implement A/B tests efficiently at scale.

<Image
    src={'https://i.giphy.com/iW68tAN80YJNGtjSYN.gif'}
    height={700}
    width={800}
/>

Feel free to comment on this post if you have any questions. I'd be happy to help.
In case of any mistakes, please let me know via the Contact page so I can correct them.

If you learned something new from this article, please share this article for some good karma and leave a reaction or a comment below. It would mean a lot to me 😇

</BlogLayout>
</Layout>

{/* prettier-ignore */}


A/B Testing at Scale: How We Engineered a Solution for Millions


import BlogLayout from '@/components/BlogLayout';
import Layout from '@/components/Layout';

export const data = {
    featured: {
        link: 'https://react.statuscode.com/issues/284',
        label: 'Featured in React Status Newsletter #284'
    },
    date: '2022-04-09',
    title: '5 Easy Steps to Create Your Own React Hook',
    description:
        'Short guide that demonstrates a custom hook in react with a real life example',
    image: '/images/blog/react-custom-hooks.png',
    color: '#F1E0C5',
    category: 'Frontend'
};

        <Layout metaTitle={data.title} metaDescription={data.description} ogImage={data.image}>

<BlogLayout data={data}>
Quite often, you'll notice that you're writing a lot of repetitive code to accomplish something 😟 Custom hooks can save the day and end up being asked about in interviews as well! 🚀

Consider the following scenario:
You have a webpage with various components and you need to determine whether or not the user is connected to the internet. You might wish to **show a popup** or **take some action** if the user loses their internet connection.

When you lose internet connection, Reddit displays this banner.

<img
    src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649349684657/qfNLfhP7C.png"
    class="w-full max-w-[600px]  border-4 border-white"
/>

Alternatively, you might want to disable a form as soon as the user loses internet access to prevent data loss and notify the user.

## Step 1

So let's take it one step at a time. First, let's look at how we can tell if a user
is connected to the internet or not using DOM APIs.

```javascript
// Fired off when the user is online
const goOnline = function (event) {
    console.log("I'm online");
};

// Fired off when the user goes offline
const goOffline = function (event) {
    console.log("Oops, I'm offline");
};

window.addEventListener('offline', goOffline);
window.addEventListener('online', goOnline);
```

Paste that into the browser console and watch what happens if you switch off your internet :)

## Step 2

Let's have a look at how we can achieve this in a React component now.

```jsx
import React, { useEffect } from 'react';

export default function MyComponent() {
    const goOnline = function (event) {
        console.log("I'm online");
    };

    const goOffline = function (event) {
        console.log("Oops, I'm offline");
    };

    useEffect(() => {
        window.addEventListener('offline', goOffline);
        window.addEventListener('online', goOnline);

        /* Be a good citizen. Always cleanup your event 
    listeners when component unmounts */
        return () => {
            window.removeEventListener('offline', goOffline);
            window.removeEventListener('online', goOnline);
        };
    }, []);

    return <div></div>;
}
```

If you've made it this far, kudos! Let's get going.

## Step 3

Now, let's take some action based on the status of the internet connection. When
the internet is down, let us display an error message. I am going to use a state
variable to keep track of it.

```jsx
import React, { useEffect, useState } from 'react';

export default function MyComponent() {
    const [online, setOnline] = useState(true);

    const goOnline = function (event) {
        console.log("I'm online");
        setOnline(true);
    };

    const goOffline = function (event) {
        console.log("Oops, I'm offline");
        setOnline(false);
    };

    useEffect(() => {
        window.addEventListener('offline', goOffline);
        window.addEventListener('online', goOnline);

        /* Be a good citizen. Always cleanup your event 
    listeners when component unmounts */
        return () => {
            window.removeEventListener('offline', goOffline);
            window.removeEventListener('online', goOnline);
        };
    }, []);

    return <>{!online ? <p>Please check your internet connection!</p> : ''}</>;
}
```

Codesandbox Link: <a href="https://codesandbox.io/s/boring-river-r8pyb9?file=/src/App.js/" target="_blank">Click here</a>

**Turn off your internet connection and see what happens!**

## Step 4

Yay! We've implemented our logic in a single React component. But what if we want to check the internet status in a different component? One option is to copy and
paste the entire code into the other component. But wait, that's a bad idea because you'd end up repeating a lot of code.

**_Here comes React Custom Hook to save us all!_**

A point to note: All hooks in React must start with the prefix "use". Let us name our custom hook as `useNetwork`.

I like to place all my hooks under a separate directory like `src/hooks` but it's up-to you.
Create a new Javascript file called `useNetwork.js`

```jsx
import React, { useEffect, useState } from 'react';

function useNetwork() {
    //Note that you can make use of other hooks within custom hooks
    const [online, setOnline] = useState(true);

    useEffect(() => {
        const goOnline = function (event) {
            console.log("I'm online");
            setOnline(true);
        };
        const goOffline = function (event) {
            console.log("Oops, I'm offline");
            setOnline(false);
        };
        window.addEventListener('offline', goOffline);
        window.addEventListener('online', goOnline);

        return () => {
            window.removeEventListener('offline', goOffline);
            window.removeEventListener('online', goOnline);
        };
    }, []);

    return online;
}

export default useNetwork;
```

If you read it line by line, you'll notice that it's very similar to how we wrote the logic in the React component in Step 3, but this time we've isolated it in a separate function called `useNetwork`. Take note of how we return the state `online` at the end.

## Step 5

We've finally arrived at the last step, and all that remains is to put the custom
hook to the test.

```jsx
import React from 'react';
import useNetwork from './hooks/useNetwork';

export default function MyComponent() {
    //We import the useNetwork hook and use it like this 🙂
    const online = useNetwork();

    return <>{!online ? <p>Please check your internet connection!</p> : ''}</>;
}
```

🔥 Andddd voilaa! We've created a custom hook in React 🎉🎉 <br/>

Codesandbox Link: <a href="https://codesandbox.io/s/cold-bush-vopvh8?file=/src/App.js" target="_blank">Click here</a>

<img src="https://i.giphy.com/media/26ufdipQqU2lhNA4g/giphy.gif" width="300" />

</BlogLayout>
</Layout>


Short guide that demonstrates a custom hook in react with a real life example

5 Easy Steps to Create Your Own React Hook


import BlogLayout from '@/components/BlogLayout';
import BlogTip from '@/components/BlogTip';
import Layout from '@/components/Layout';
import MarkdownExternalLink from '@/components/MarkdownExternalLink';
import ReactEditor from '@/components/ReactEditor';
import Image from '@/components/Image';
import Zoom from 'react-medium-image-zoom';

export const data = {
    date: '2022-04-12',
    title: '10 Turbo Tips for Blazing Fast Web Performance',
    description: '',
    image: '/images/blog/ten-tips-to-speed-up-your-websites.png',
    category: 'Web Performance'
};

        <Layout metaTitle={data.title} metaDescription={data.description} ogImage={data.image}>

<BlogLayout data={data}>

</BlogLayout>
</Layout>

{/* prettier-ignore */}


10 Deep Web Perf. Techniques for Super Fast Loading Speeds


import BlogLayout from '@/components/BlogLayout';
import Layout from '@/components/Layout';

export const data = {
    date: '2022-04-12',
    title: 'Behind the Scenes: How We Ranked on Page 1 of Google Search',
    description: '',
    image: '/images/blog/how-we-ranked-on-page-1-of-google-search.png',
    category: 'Frontend, SEO'
};

        <Layout metaTitle={data.title} metaDescription={data.description} ogImage={data.image}>

<BlogLayout data={data}>

</BlogLayout>
</Layout>

{/* prettier-ignore */}


My writings

Garbage Collection in JavaScript: Explained in Simple Words

A/B Testing at Scale: How We Engineered a Solution for Millions

5 Easy Steps to Create Your Own React Hook

10 Deep Web Perf. Techniques for Super Fast Loading Speeds

Behind the Scenes: How We Ranked on Page 1 of Google Search at Crio