Forem: Aakash Kumar Chaudhary

Understanding async and await in JavaScript: The Key to Cleaner Asynchronous Code

Aakash Kumar Chaudhary — Sat, 14 Dec 2024 06:53:16 +0000

JavaScript's asynchronous nature is one of its greatest strengths, but it can also be a source of frustration for developers. Over time, we’ve moved from callback functions (and the dreaded "callback hell") to promises, and now to async and await. These modern tools simplify asynchronous programming, making your code more readable, maintainable, and efficient.

But how do async and await really work, and why are they so beneficial? Let’s dive deep and explore!

What Are async and await?
In JavaScript, async and await are part of ES2017 (ES8) and provide a way to handle asynchronous operations in a more synchronous-looking manner. They are built on top of Promises and allow you to write cleaner, more readable code.

async: Declaring a function as async ensures that it always returns a promise, even if you don’t explicitly return one
await: This keyword is used inside async functions to pause the execution of the function until a promise is resolved or rejected. It makes asynchronous code appear synchronous.

How Do They Work?
Let’s see some examples to understand how they work.

async Function Example

Here, the async keyword automatically wraps the return value in a promise. So, calling sayHello() will return a promise that resolves to "Hello, World!"

Using await in an async Function
The await keyword pauses the execution of the function until the promise is resolved or rejected.

Without await, you’d need to chain .then() calls, which can make the code harder to read.

Does await Block the Execution?
If await really blocks the execution then how it is different than traditional synchronous JavaScript and what is the actual benefit of using it?

Here’s where some confusion arises: await does NOT block the main thread. It only pauses the execution of the current async function, while other parts of your program continue to run.

Analogy:
Imagine you're cooking:

Synchronous: You have to stand at the stove and stir the pot constantly until the food is cooked. You can't do anything else during that time.
Async/Await: You put the food in the oven (await a Promise that it will be cooked). You can then do other things (chop vegetables, set the table) while you wait. When the timer rings (the Promise resolves), you go back to the oven and take out the food.

Example:

Output:

Notice that "End" is logged before "Data fetched." This demonstrates that while await pauses the fetchData function, it doesn’t block the rest of the program.

Conclusion
async and await are powerful tools that transform how we write asynchronous code in JavaScript. By making asynchronous workflows look synchronous, they improve readability, simplify error handling, and give you precise control over sequential and parallel operations—all without blocking the main thread.

Implementing infinite scrolling in react

Aakash Kumar Chaudhary — Wed, 09 Oct 2024 19:20:30 +0000

Before we start coding, if you want to know more about what pagination is and why do we need it, do check out my blog here.

Let's say the ask is to display 50 items on the screen and whenever user reaches to the bottom, load next 50 items.
For that we need to keep track of the scroll position and keep on comparing it with the document body offsetHeight.

To get the scroll position, we will use window.scrollY.
Basically window.scrollY gives the number of pixels the page has been scrolled vertically from the top. It tells you how far down the page the user has scrolled.
Along with the window.scrollY, we will be using two more values to check if the user has reached at the bottom of the page or not.
window.innerHeight: This represents the height of the visible part of the window (the viewport). It's the height of the area that the user can currently see in the browser without scrolling.

document.body.offsetHeight: It gives the total height of the body element.

Code:

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i <= items; i++) {
    query.push(<p>{i}</p>);
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight + window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items + 50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return <div className="App">{query.map((q) => q)}</div>;
}

Explanation: The first render of the page will trigger the useEffect hook which will add a scroll event. Whenever scrolling event happens, onScroll() method will be invoked and the it will check the position of the scroll. If it is at the bottom-40, then more 50 items is added to the items state.

Implementing infinite scrolling in react

Aakash Kumar Chaudhary — Wed, 09 Oct 2024 19:20:30 +0000

Before we start coding, if you want to know more about what pagination is and why do we need it, do check out my blog here.

document.body.offsetHeight: It gives the total height of the body element.

Code:

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i <= items; i++) {
    query.push(<p>{i}</p>);
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight + window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items + 50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return <div className="App">{query.map((q) => q)}</div>;
}

Pagination in React

Aakash Kumar Chaudhary — Wed, 09 Oct 2024 18:42:44 +0000

What is Pagination anyway?
Pagination is the process of dividing a large set of data or content into separate, smaller, sequentially numbered pages, making it easier for users to navigate and access the content.

Why do we need Pagination?
Pagination is important for several reasons, especially when handling large data sets or extensive content on websites or applications. Here are the main reasons why we need pagination:

1. Improves Performance:
Loading large amounts of data at once can be slow and resource-intensive for both the server and the client. Pagination helps break the data into smaller chunks, reducing the load on the server and improving page load times.
2. Enhances User Experience:
Showing too much content at once can overwhelm users and make it hard to find relevant information. Pagination provides a structured way to navigate through content, improving usability and making it easier for users to find what they need.
3. Reduces Bandwidth Usage:
For users on slower networks or with limited data, loading large amounts of content all at once can consume significant bandwidth. Pagination allows only a small portion of the data to be loaded initially, reducing bandwidth consumption.
4. Organizes Content:
Pagination helps organize content by breaking it into logical sections, making it easier to display and browse through data incrementally, especially on platforms like blogs, e-commerce websites, or search results pages.
5. Simplifies Navigation:
Pagination provides clear navigation controls (e.g., page numbers, "Next" and "Previous" buttons), allowing users to easily jump to specific pages of content without scrolling through endless amounts of data.
6. Improves Server Efficiency:
Handling requests for smaller chunks of data instead of retrieving the entire data set can improve server efficiency and scalability, especially in applications where many users are requesting data simultaneously.
7. Better for SEO (Search Engine Optimization):
Search engines can crawl and index paginated content more effectively. Breaking content into smaller, structured pieces with clear pagination makes it easier for search engines to understand and rank each part of the content.
When Is Pagination Needed?
When displaying a long list of items (e.g., products, search results).
When dealing with large data sets that would cause performance issues if loaded all at once.
When you want to give users more control over how much data they view at once.
In summary, pagination is essential for handling large data sets efficiently, improving user experience, enhancing performance, and organizing content in a way that's both easy to navigate and scalable.