Forem: Abhay Kumar

TypeScript Is Getting a Big Upgrade!

Abhay Kumar — Wed, 12 Mar 2025 18:16:35 +0000

Imagine you're working on a big project with lots of code. Right now, it can take a long time to check everything and make sure nothing breaks. Microsoft is fixing this problem by rebuilding TypeScript from scratch to make it super fast!

How Fast Will It Be?

Loading projects will be 8 times faster
Checking code will be 10 times faster
It will use half the computer memory

Why This Matters
Think about when you're coding:

You'll get instant feedback when there are errors
Your editor will load super fast
Finding where functions are used becomes lightning quick
Renaming variables happens instantly
Everything feels snappy and responsive

When Is This Coming?

By mid-2025: Basic version ready
End of 2025: Full feature version
TypeScript 7.0 will include all these improvements

What Does This Mean For Developers?

Better tools to help you write code
More powerful ways to understand your codebase
Faster feedback while coding
New AI-powered features to help you develop
Everything works smoothly even with big projects

This upgrade is exciting news for anyone working with TypeScript! It makes developing faster, easier, and more enjoyable. Microsoft is still working on it, but the improvements they've shown so far are really impressive.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

Follow me: Abhay Kumar

Optimizing Next.js Websites for Core Web Vitals and Page Performance

Abhay Kumar — Thu, 03 Oct 2024 17:49:27 +0000

In today’s competitive online landscape, a fast and responsive website is critical for user engagement and SEO rankings. Google’s Core Web Vitals—a set of key metrics that evaluate the user experience—has become a crucial factor for ranking. These metrics specifically focus on three areas: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

If you're using Next.js for your website or application, you already have an advantage with its built-in optimizations. But to truly master Core Web Vitals, you’ll need to implement specific techniques that will help you score better and create a smoother user experience. In this guide, we'll dive into practical strategies to optimize your Next.js website for Core Web Vitals and overall page performance.

What Are Core Web Vitals?
Before diving into optimization techniques, let's briefly recap what Core Web Vitals are and why they matter.

Largest Contentful Paint (LCP): Measures how long it takes for the largest visible content element to load. Ideally, this should be under 2.5 seconds.

First Input Delay (FID): Measures the time it takes for a page to respond after a user’s first interaction. A good threshold is less than 100 milliseconds.

Cumulative Layout Shift (CLS): Measures the visual stability of the page by assessing how often elements unexpectedly shift. A score of less than 0.1 is considered ideal.

Google uses these metrics to determine how user-friendly your website is, which influences your ranking on the search results page.

Key Strategies to Improve Core Web Vitals in Next.js

Optimize Your Images with next/image (LCP Improvement)

import Image from 'next/image';

function HomePage() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <Image
        src="/images/large-image.jpg"
        alt="Example image"
        width={800}
        height={600}
        loading="lazy"
        priority={true}  // Ensure this is loaded first
      />
    </div>
  );
}

export default HomePage;

2. Implement Dynamic Imports for Code Splitting (FID and TBT Improvement)

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  ssr: false,
  loading: () => <p>Loading component...</p>,
});

function HomePage() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <HeavyComponent />  {/* Only loaded when needed */}
    </div>
  );
}

export default HomePage;

3. Preload Critical Resources (LCP Improvement)

import Head from 'next/head';

function MyDocument() {
  return (
    <Head>
      <link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
      <link rel="preload" href="/css/main.css" as="style" />
    </Head>
  );
}

export default MyDocument;

4. Use Efficient Font Loading (LCP, CLS Improvement)

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',  // Use 'swap' to prevent invisible text
});

function HomePage() {
  return (
    <div className={roboto.className}>
      <h1>Welcome to My Website</h1>
      <p>This is sample text using optimized Google Fonts.</p>
    </div>
  );
}

export default HomePage;

5. Minify and Compress JavaScript & CSS (TBT, FID Improvement)

// next.config.js
module.exports = {
  compress: true,  // Enables gzip and Brotli compression
  webpack(config) {
    config.optimization.minimize = true;
    return config;
  },
};

Conclusion

Optimizing your Next.js website for Core Web Vitals is crucial for providing an excellent user experience and improving your SEO performance. By focusing on LCP, FID, and CLS, and implementing strategies like lazy loading images, optimizing fonts, preloading critical resources, and reducing unused JavaScript, you can significantly enhance your website’s speed and stability.

The beauty of Next.js lies in its flexibility, enabling developers to build fast, scalable, and optimized applications effortlessly. By following the steps outlined in this guide, you’ll be well on your way to mastering Core Web Vitals and providing a seamless experience for your users.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

Follow me: Abhay Kumar

Simple Guide to Implementing Clerk Authentication

Abhay Kumar — Sat, 21 Sep 2024 17:32:40 +0000

Clerk is a simple and effective solution for adding user authentication and management to web apps. This guide will walk you through implementing Clerk in your project using simple code examples that beginners can follow easily.

Step 1: Install Clerk
First, you need to add Clerk to your project. You can do this using npm or yarn.

# Using npm
npm install @clerk/clerk-react

# Using yarn
yarn add @clerk/clerk-react

Step 2: Create a Clerk Application
Head over to the Clerk dashboard, sign up, and create a new application. After that, you will be provided with an API key and frontend key. You will need these later in the process.

Step 3: Set up Clerk in React
In your main React component (e.g., index.js), import and initialize Clerk:

import React from "react";
import ReactDOM from "react-dom";
import { ClerkProvider } from "@clerk/clerk-react";

const frontendApi = "your-frontend-api-key-here";

ReactDOM.render(
  <ClerkProvider frontendApi={frontendApi}>
    <App />
  </ClerkProvider>,
  document.getElementById("root")
);

This wraps your app in the Clerk provider, enabling authentication across your application.

Step 4: Create a Sign-in and Sign-up Component

Clerk provides easy-to-use pre-built components for authentication. To add sign-in and sign-up functionality, you just need to include them in your app.

import { SignIn, SignUp } from "@clerk/clerk-react";

function AuthPage() {
  return (
    <div>
      <h1>Sign In</h1>
      <SignIn />
      <h1>Sign Up</h1>
      <SignUp />
    </div>
  );
}

export default AuthPage;

Step 5: Protect Routes with Clerk
To protect certain routes, Clerk offers a simple component that redirects users to the sign-in page if they're not authenticated.

import { RedirectToSignIn, useUser } from "@clerk/clerk-react";

function ProtectedRoute({ children }) {
  const { isSignedIn } = useUser();

  if (!isSignedIn) {
    return <RedirectToSignIn />;
  }

  return children;
}

Then, use this component to wrap your protected pages.

function Dashboard() {
  return (
    <ProtectedRoute>
      <h1>Welcome to your dashboard</h1>
    </ProtectedRoute>
  );
}

Step 6: Sign Out Button
Clerk also provides a simple sign-out button. You can add this to your navigation or dashboard pages.

import { SignOutButton } from "@clerk/clerk-react";

function NavBar() {
  return (
    <nav>
      <h1>App Navigation</h1>
      <SignOutButton />
    </nav>
  );
}

Conclusion
By following these simple steps, you can easily integrate Clerk into your React application, allowing users to sign up, sign in, and manage their authentication. Clerk takes care of all the heavy lifting behind authentication, so you can focus on building your app.

For more advanced configurations like social login or integrating with your own backend, Clerk’s documentation is a great resource to explore further.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

Follow me: Abhay Kumar

Step-by-Step Guide to Generate and Download PDFs with React-PDF, FileSaver, and JSZip

Abhay Kumar — Thu, 12 Sep 2024 04:19:04 +0000

In this tutorial, we will explore how to use React-PDF, FileSaver, and JSZip to generate multiple PDFs and download them as a ZIP file. This is especially useful for applications where you need to generate custom reports or statements for different users and bundle them into a single compressed file for download.

Here’s a step-by-step guide on how to implement the solution.

Prerequisites
Before we start, make sure you have the following installed in your React project:

React - A JavaScript library for building user interfaces.

@react-pdf/renderer - To render PDFs in a React environment.

FileSaver - To enable file downloads.

JSZip - To compress multiple files into a ZIP format.

You can install the required dependencies with:

npm install @react-pdf/renderer file-saver jszip

Step 1: Create a Simple PDF Document with React-PDF

The first step is to create a basic PDF layout using the @react-pdf/renderer library. We define a simple component called StatementPdf, which will serve as our document template.

Here’s a basic PDF layout:

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const StatementPdf = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

export default StatementPdf;

In this document, we have a simple two-section layout on an A4-sized page.

Step 2: Generate Multiple PDFs

Now that we have the StatementPdf component, we can move on to generating multiple PDFs and zipping them together.

We will create a button that generates multiple PDFs when clicked, using the BlobProvider component from @react-pdf/renderer.

Here’s how to create and download multiple PDFs:

import { BlobProvider } from "@react-pdf/renderer";
import { saveAs } from "file-saver";
import JSZip from "jszip";
import ReactDOM from "react-dom";
import StatementPdf from "./components/StatementPdf";

const GeneratePdfButton = () => {
  const generatePdf = async () => {
    try {
      const pdfBlobs = await Promise.all(
        [2, 3, 4].map(() => generatePdfUrl())
      );
      await createAndDownloadZip(pdfBlobs);
    } catch (error) {
      console.error("Error generating PDFs:", error);
    }
  };

  const generatePdfUrl = (): Promise<Blob> => {
    return new Promise((resolve, reject) => {
      const pdfElement = (
        <BlobProvider document={<StatementPdf />}>
          {({ blob, loading, error }) => {
            if (!loading && !error && blob) {
              resolve(blob);
            } else if (error) {
              reject(error);
            }
            return null;
          }}
        </BlobProvider>
      );
      ReactDOM.render(pdfElement, document.createElement("div"));
    });
  };

  async function createAndDownloadZip(pdfBlobs: Blob[]) {
    const zip = new JSZip();
    const agent_name = "Abhay Kumar"; // This can be dynamic for different PDFs.

    for (let i = 0; i < pdfBlobs.length; i++) {
      const blob = pdfBlobs[i];
      zip.file(`${agent_name}-${i}.pdf`, blob);
    }

    const zipBlob = await zip.generateAsync({ type: "blob" });
    saveAs(zipBlob, "statements.zip");
  }

  return (
    <div>
      <button onClick={generatePdf}>Generate PDFs</button>
    </div>
  );
};

export default GeneratePdfButton;

generatePdf: This function triggers the generation of multiple PDF files. It calls generatePdfUrl for each PDF you want to generate.

generatePdfUrl: A function that creates a Blob from the StatementPdf component using BlobProvider. Each Blob represents a PDF file.

createAndDownloadZip: This function compresses all the generated PDFs into a ZIP file using JSZip, then downloads it with FileSaver.

Step 3: Download the PDFs in a ZIP File

Once the PDFs are generated, they are compressed using the JSZip library. Each PDF is named based on the user's name (in this case, "Abhay Kumar"), and then downloaded as a .zip file.

In createAndDownloadZip, we loop through the pdfBlobs array, which contains all the generated PDFs, and add them to the ZIP. The ZIP file is then created and downloaded using the saveAs function from the FileSaver library.

Step 4: Display the PDF in a Viewer

You might also want to preview the generated PDF before downloading it. The @react-pdf/renderer library provides a convenient PDFViewer component for this purpose. Here's how you can add a viewer for the PDF:

      <div>
       <PDFViewer width={1200} height={600}>
          <StatementPdf />
        </PDFViewer>
      </div>

Conclusion

In this tutorial, we’ve covered how to generate and download multiple PDFs in a React application. By using @react-pdf/renderer, JSZip, and file-saver, you can create a seamless experience for generating and downloading documents. Happy coding!

Feel free to customize the content and style of the blog post to better fit your needs! If you have any questions or need further assistance, just let me know.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

Follow me: Abhay Kumar

Building Accessible & Reusable React Components: Best Practices for Modern Web Development

Abhay Kumar — Thu, 05 Sep 2024 03:10:58 +0000

In the rapidly evolving world of web development, creating accessible and reusable components is crucial. This is not just about writing clean code—it's about ensuring that your web applications are usable by everyone, including people with disabilities. Accessibility (a11y) and reusability are essential practices that can elevate the quality of your React applications. This blog will guide you through the best practices for building accessible and reusable React components.

1. The Importance of Accessibility in Web Development

Accessibility is the practice of making your web applications usable by as many people as possible, including those with disabilities. According to the World Health Organization, over 1 billion people globally live with some form of disability. Therefore, ensuring your web applications are accessible is not just a good practice—it's an ethical responsibility.

Key Accessibility Concepts:

Semantic HTML: Use HTML elements according to their intended purpose.

ARIA: Accessible Rich Internet Applications (ARIA) provides extra information to assistive technologies.

Keyboard Navigation: Ensure all interactive elements can be navigated using a keyboard.

2. Creating Accessible React Components

When building React components, start with accessibility in mind. Here are a few key practices:

a. Use Semantic HTML

Start by using the correct HTML elements for their intended purpose. This improves accessibility out of the box. For example, a button element should be used for actions, not a div.

Example:

const AccessibleButton = ({ onClick, label }) => (
  <button onClick={onClick} aria-label={label}>
    {label}
  </button>
);

In the above example, the button element is semantically correct for an action, and aria-label provides a descriptive label for screen readers.
b. Implement ARIA Roles and Properties
ARIA roles, states, and properties help in making custom components accessible.

Example:

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <h2 id="modal-title">Modal Title</h2>
      <button onClick={onClose} aria-label="Close modal">
        Close
      </button>
      {children}
    </div>
  );
};

In this example, the role="dialog" and aria-modal="true" make it clear to assistive technologies that this is a modal window.

c. Ensure Keyboard Navigation

Your components should be navigable using a keyboard. This is particularly important for users who cannot use a mouse.

Example:

const AccessibleLink = ({ href, label }) => (
  <a href={href} tabIndex="0" aria-label={label}>
    {label}
  </a>
);

The tabIndex="0" ensures that the link is focusable via the keyboard, and aria-label provides an accessible name for screen readers.

3. Designing Reusable React Components

Reusability is about creating components that can be used across different parts of your application without modification. This not only speeds up development but also ensures consistency across your UI.

a. Break Down Components

Instead of creating large, monolithic components, break them down into smaller, independent pieces.

Example:

const Button = ({ children, onClick }) => (
  <button onClick={onClick}>
    {children}
  </button>
);

const IconButton = ({ icon, label, onClick }) => (
  <Button onClick={onClick}>
    <span aria-hidden="true">{icon}</span>
    {label}
  </Button>
);

Here, the IconButton component reuses the Button component, demonstrating modular design.

b. Use Props Effectively

Props should be used to make components configurable and reusable. The goal is to make the component adaptable to various contexts.

Example:

const Card = ({ title, content, footer }) => (
  <div className="card">
    <h3>{title}</h3>
    <p>{content}</p>
    {footer && <div className="card-footer">{footer}</div>}
  </div>
);

In this Card component, props like title, content, and footer allow it to be reused in different contexts with different data.

c. Composition Over Inheritance

Favor composition over inheritance when designing reusable components. Composition allows you to create complex components by combining simpler ones.

Example:

const Dialog = ({ title, content, actions }) => (
  <div role="dialog" aria-labelledby="dialog-title">
    <h2 id="dialog-title">{title}</h2>
    <div>{content}</div>
    <div>{actions}</div>
  </div>
);

const ConfirmationDialog = ({ onConfirm, onCancel }) => (
  <Dialog
    title="Are you sure?"
    content="This action cannot be undone."
    actions={
      <>
        <button onClick={onCancel}>Cancel</button>
        <button onClick={onConfirm}>Confirm</button>
      </>
    }
  />
);

Here, ConfirmationDialog composes the Dialog component to create a specific type of dialog.

4. Testing for Accessibility

It's important to test your components for accessibility. Here are a few tools you can use:

Lighthouse: A Chrome DevTools tool that audits your app for accessibility issues.

axe-core: An accessibility engine that can be integrated into your testing setup.

Screen Readers: Test your components with screen readers like NVDA or VoiceOver.

Conclusion
Building accessible and reusable React components requires a thoughtful approach, but the benefits are clear. By ensuring your components are accessible, you make your web applications available to a broader audience. Reusability, on the other hand, leads to cleaner, more maintainable code. Together, these practices will help you create high-quality React applications that are both inclusive and efficient.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

Follow me: Abhay Kumar

Understanding Web Storage: LocalStorage, SessionStorage, and Cookies

Abhay Kumar — Fri, 30 Aug 2024 18:02:09 +0000

In modern web development, managing data on the client side has become an essential skill. Developers often rely on localStorage, sessionStorage, and cookies to store data in the user’s browser. While these three mechanisms serve similar purposes, they have distinct differences in terms of capacity, persistence, and use cases. In this blog, we'll explore these differences, with examples, to help you better understand when and how to use each one.

1. localStorage: Persistent Client-Side Storage

Purpose: localStorage is designed to store data on the client side that persists even after the browser is closed. It's an excellent choice for data that needs to be retained across multiple sessions.

Capacity: localStorage offers substantial storage space, typically up to 10MB per domain, which is sufficient for most applications.

Persistence: Data stored in localStorage remains available until explicitly deleted by the user or the application. This makes it ideal for storing user preferences, like theme settings, that should persist across different visits to the site.

Example: Suppose you have a web application that offers both light and dark modes. You can use localStorage to save the user's preference so that the next time they visit, the site automatically loads in their chosen mode.

2. sessionStorage: Temporary Session-Based Storage

Purpose: sessionStorage also stores data on the client side, but it is limited to the duration of the page session. This means the data is cleared when the user closes the browser tab or window.

Capacity: Similar to localStorage, sessionStorage provides around 5MB of storage per domain. Although the capacity is smaller, it's often sufficient for temporary data.

Persistence: The key difference between sessionStorage and localStorage is persistence. sessionStorage data is only available for the duration of the page session, making it suitable for storing temporary data that doesn't need to persist beyond the current session.

Example: Imagine a multi-step form where users input data across several pages. You can use sessionStorage to temporarily store the form data as the user progresses through the steps. This ensures that if they accidentally reload a page, they don’t lose their progress.



// Save form data temporarily in sessionStorage
sessionStorage.setItem('step1Data', JSON.stringify({ name: 'John Doe', age: 30 }));

// Retrieve the saved data
const step1Data = JSON.parse(sessionStorage.getItem('step1Data'));
console.log(step1Data); // Output: { name: 'John Doe', age: 30 }

3. Cookies: Small, Persistent Storage with Server Interaction

Purpose: Cookies are used to store small pieces of data that need to persist across sessions and can be sent with HTTP requests to the server. They are often used for tracking user sessions, storing authentication tokens, and remembering user settings.

Capacity: Cookies are much smaller in capacity compared to localStorage and sessionStorage, with a limit of 4KB per cookie. However, multiple cookies can be stored, each with this limit.

Persistence: Cookies have a configurable expiration time. They can either expire at the end of a session or persist for a specified duration. This flexibility allows cookies to be used for both short-term and long-term storage.

Example: A common use of cookies is to store a user’s login token, which allows the user to stay logged in across sessions without having to re-enter their credentials every time they visit the site.



// Set a cookie with an expiration date
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Retrieve the cookie value
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
    const [key, value] = cookie.trim().split('=');
    acc[key] = value;
    return acc;
}, {});
console.log(cookies.username); // Output: JohnDoe

When to Use Each Storage Mechanism

localStorage: Use when you need to store large amounts of data that should persist across multiple sessions and are not sensitive (e.g., user preferences, non-sensitive application state).
sessionStorage: Ideal for temporary data that should only persist for the duration of the user’s session (e.g., single-session form data, temporary state).

Cookies: Best for storing small pieces of data that need to be sent to the server with HTTP requests or need a specific expiration (e.g., authentication tokens, user preferences that need to interact with the server).

Conclusion

Understanding the differences between localStorage, sessionStorage, and cookies is crucial for making the right choice in your web applications. Each has its own strengths and limitations, and knowing when to use each one will help you build more efficient, user-friendly applications.

By mastering these tools, you'll be better equipped to manage client-side data storage in your next project, ensuring a seamless experience for your users.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

LinkedIn Profile:Abhay Kumar

Mastering Loading Spinners in React 19 Forms Without useState

Abhay Kumar — Wed, 28 Aug 2024 17:57:02 +0000

In the dynamic world of React, managing user feedback during form submissions is crucial for creating smooth and intuitive user experiences. With the release of React 19, developers are provided with several hooks to handle loading states without relying on the familiar useState hook. Among these options, useActionState, useFormStatus, and useTransition stand out. This blog will explore these hooks, provide insights on their best use cases, and offer code examples to help you integrate them into your applications.

1. useActionState: The Universally Usable Hook

useActionState is a powerful hook that can be universally applied across various actions in React. It provides a pending state, which is especially useful for displaying loading indicators during asynchronous operations like form submissions.

import { useActionState } from 'react';

function MyForm() {
    const { pending } = useActionState();

    const handleSubmit = (event) => {
        event.preventDefault();
        // Perform form submission logic
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="username" placeholder="Username" />
            <button type="submit" disabled={pending}>
                {pending ? 'Submitting...' : 'Submit'}
            </button>
        </form>
    );
}

In this example, the pending state returned by useActionState is used to conditionally render a loading indicator within the submit button. This hook is highly versatile and can be used across various components to handle loading states effectively.

2. useFormStatus: The Go-To for Form-Level Loading States

useFormStatus is designed specifically for managing the status of forms. However, it requires you to render it as a standalone component within your form, typically inside a SubmitButton component. Once abstracted, it becomes a reusable solution for displaying loading states across multiple forms without redundant code.

import { useFormStatus } from 'react';

function SubmitButton() {
    const { pending } = useFormStatus();

    return (
        <button type="submit" disabled={pending}>
            {pending ? 'Submitting...' : 'Submit'}
        </button>
    );
}

function MyForm() {
    const handleSubmit = (event) => {
        event.preventDefault();
        // Perform form submission logic
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="username" placeholder="Username" />
            <SubmitButton />
        </form>
    );
}

Here, the SubmitButton component leverages useFormStatus to manage the loading state. This abstraction is particularly useful when you have multiple forms across your application, as it avoids repetition and keeps your code DRY (Don’t Repeat Yourself).

3. useTransition: The Low-Level Primitive

useTransition is a lower-level primitive that provides control over more complex scenarios where managing transitions between UI states is necessary. However, its usage for showing a simple loading spinner is rare and generally not recommended for straightforward form submissions.

import { useTransition } from 'react';

function MyForm() {
    let [isPending, startTransition] = useTransition();

    const handleSubmit = (event) => {
        event.preventDefault();
        startTransition(() => {
            // Perform form submission logic
        });
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="username" placeholder="Username" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Submitting...' : 'Submit'}
            </button>
        </form>
    );
}

In this example, useTransition provides a more manual approach to managing the pending state. While it offers flexibility, it’s often overkill for simple loading indicators and is best reserved for scenarios where transitioning between complex UI states is required.

My Approach: Abstraction and Practicality

In my experience, I typically default to using a SubmitButton component that I’ve abstracted with useFormStatus. This approach ensures that the loading state is handled consistently across all forms in my application without the need to repeat myself by managing spinners individually.

However, if a specific scenario arises where the SubmitButton cannot be used, I can still rely on the pending state from useActionState to provide user feedback. This dual approach allows me to maintain flexibility and practicality, ensuring the right tool is used for the right job.

Conclusion: Choose the Right Tool for the Job

React 19 introduces several hooks that can manage loading states effectively without useState. By understanding the nuances of useActionState, useFormStatus, and useTransition, you can select the most appropriate hook for your specific use case. For most applications, abstracting a SubmitButton with useFormStatus provides a clean and reusable solution, while useActionState offers flexibility when needed. Meanwhile, useTransition remains a specialized tool for more complex scenarios.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

LinkedIn Profile:Abhay Kumar

React #WebDevelopment #React19 #TypeScript #Frontend

React 19: The latest advancements in front-end development

Abhay Kumar — Tue, 27 Aug 2024 18:01:23 +0000

React 19 is the latest version of the popular JavaScript library for building user interfaces. It comes with several new features and improvements that make it even more powerful and easier to use.

Concurrent mode

Concurrent mode is a new feature in React 19 that allows you to write code that can run in parallel. This can improve the performance of your application, especially on mobile devices.

To use concurrent mode, you need to create a new React app using the create-react-app tool. Once you have created a new app, you can add the following code to your index.js file:

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This code will enable concurrent mode for your app. You can now start writing code that can run in parallel.

Server components

Server components are a new type of React component that can be rendered on the server. This can improve the performance of your application by reducing the amount of data that needs to be sent to the client.

To use server components, you need to create a new React app using the create-react-app tool. Once you have created a new app, you can add the following code to your index.js file:

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => {
  return (
    <div>
      Hello world!
    </div>
  );
};
const html = ReactDOMServer.renderToString(<App />);

This code will create a new React app that uses server components. You can now start writing code that can be rendered on the server.

Improvements to the React DevTools

The React DevTools are a set of tools that can be used to debug and profile React applications. In React 19, the DevTools have been updated with several new features, including:

A new profiler that can be used to track the performance of your application
A new component tree viewer that can be used to inspect the structure of your application
A new event log that can be used to track the events that are fired by your application
These new features make the React DevTools even more powerful and easier to use.

Conclusion

React 19 is a significant update to the React library. It includes several new features and improvements that make it even more powerful and easier to use. If you are using React, I encourage you to upgrade to React 19 today.

🚀 A Leap Forward: React 19 Introduces the Actions Feature

Abhay Kumar — Sat, 24 Aug 2024 04:35:18 +0000

In the ever-evolving landscape of web development, React continues to lead the charge with powerful innovations. The latest game-changer in React 19? The Actions feature. Let’s dive into why this addition is set to transform how we manage forms and data submission in modern web applications.

🔍 What Are Actions?

In React 19, Actions redefine how we handle form submissions and data updates. By integrating more tightly with React server components (RSC), Actions enable seamless communication between the client and server, allowing you to manage data with a level of efficiency and simplicity that wasn’t possible before.

🌿 The Old Guard: onSubmit Event

Before Actions, developers relied on the onSubmit event to trigger form submissions. While effective, this method had its limitations—most notably, its client-side-only execution. This constraint often led to challenges when trying to manage data submission or execute searches server-side.

<form onSubmit={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

🌱 Enter Actions: A New Era

With the introduction of Actions in React 19, the reliance on onSubmit becomes a thing of the past. Now, you can use the action attribute directly within your JSX. This approach empowers you to handle data submission on both the client and server sides, providing unparalleled flexibility.

"use server"
const submitData = async (userData) => {
  const newUser = {
    username: userData.get('username'),
    email: userData.get('email')
  }
  console.log(newUser)
}

<form action={submitData}>
  <input name="query" />
  <button type="submit">Submit</button>
</form>

🌟 The Advantages of Actions

Seamless Asynchronous Operations: Whether your operations are synchronous or asynchronous, Actions handle them with ease, making form management smoother than ever.

Enhanced Client-Server Interaction: The action attribute in JSX creates a direct line between your client-side components and server-side logic, enabling more dynamic and responsive web applications.

React 19’s Actions feature isn’t just an upgrade; it’s a leap forward in how we build and manage modern web applications. If you haven’t explored it yet, now’s the time to start experimenting with this powerful tool. 🌟

Stay ahead in the game! Follow Abhay Kumar for more insights into the future of web development. 🚀

React19 #WebDev #FrontendMagic #JavaScriptRevolution #ReactJS

Mastering TypeScript Generics for Reusable Logic

Abhay Kumar — Fri, 23 Aug 2024 17:50:12 +0000

When developing with TypeScript, one of the most powerful tools at your disposal is the ability to write reusable and flexible code. Generics play a crucial role in achieving this by allowing you to create components, functions, and classes that can work with a wide variety of types while still maintaining strict type safety. In this blog post, we'll dive deep into how you can leverage generics to create reusable logic in TypeScript.

What Are Generics?

Generics are a way to create components, functions, or classes that work with different data types without sacrificing type safety. Instead of specifying a single type, generics allow you to define a placeholder type that can be replaced with a specific type when the function or class is used.

Why Use Generics?

Flexibility: Write code that can handle any type.
Type Safety: Ensure that your code works with specific types while avoiding the pitfalls of any.
Reusability: Reduce code duplication by creating components that can work with multiple types.

Understanding Generics with Functions

One of the most common places where you'll encounter generics is in functions. Let's start with a simple example.

Basic Generic Function:

function identity<T>(value: T): T {
    return value;
}

const numberValue = identity(42); // T is inferred as number
const stringValue = identity("Hello"); // T is inferred as string

In this example, the identity function is defined with a generic type parameter T. This means that T can be any type, and the function will return a value of the same type that was passed in.

Type Inference:

TypeScript is smart enough to infer the type of T based on the argument you pass to the function. When you pass 42, TypeScript infers that T is number, and when you pass "Hello", T is inferred as string.

Constraining Generics

While the flexibility of generics is powerful, sometimes you want to constrain the types that can be passed to a generic function. This is where type constraints come into play.

Using Constraints with Generics:

function getLength<T extends { length: number }>(value: T): number {
    return value.length;
}

const stringLength = getLength("TypeScript"); // Works, returns 10
const arrayLength = getLength([1, 2, 3]);     // Works, returns 3
// const numberLength = getLength(42); // Error: Argument of type '42' is not assignable to parameter of type '{ length: number; }'.

In this example, we’ve constrained the generic type T to types that have a length property (such as string or array). This way, you can ensure that only types with a length property are passed to the getLength function, preventing potential runtime errors.

Generics in Interfaces

You can also use generics in interfaces, allowing you to define contracts that can be applied to multiple types.

Generic Interface Example:

interface Pair<K, V> {
    key: K;
    value: V;
}

const numberStringPair: Pair<number, string> = {
    key: 1,
    value: "TypeScript",
};

const stringBooleanPair: Pair<string, boolean> = {
    key: "isActive",
    value: true,
};

Here, the Pair interface takes two generic types K and V. This allows you to create pairs of different types, such as a number key with a string value or a string key with a boolean value.

Generics are a fundamental feature of TypeScript that allow you to create flexible, reusable, and type-safe code. By understanding how to use generics in functions, classes, and interfaces, you can write more versatile code that adapts to different types without compromising type safety.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about Typescript, web development, and performance enhancement!

LinkedIn Profile:Abhay Kumar

React #WebDevelopment #Generics #TypeScript #Frontend

Building Flexible and Reusable Components with TypeScript Generics

Abhay Kumar — Fri, 16 Aug 2024 17:32:18 +0000

Building Flexible and Reusable Components with TypeScript Generics

As developers, we strive for efficient and maintainable code. One powerful tool in TypeScript's arsenal for achieving these goals is generics. Generics allow you to create components that can work with various data types, ensuring type safety and reusability throughout your application.

Why Use Generics for Components?
Imagine building a generic list component that can display a variety of data, from numbers and strings to complex objects. Without generics, you'd have to create separate components for each data type, leading to code duplication and less maintainable projects.

Benefits of using Generics:

• Type Safety: Generics enforce type checks at compile time, preventing potential runtime errors.

• Reusability: A single generic component can handle various data types, reducing code duplication and development time.

• Flexibility: You can easily adapt your components to different use cases without rewriting logic.

• Improved Code Readability: Generics can make code more self-documenting by specifying the expected data types.

Example: Generic List Component in React with TypeScript
Let's explore a concrete example of using generics with a React component:

//TypeScript
import React from 'react';

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

const List = <T extends unknown>({ items, renderItem }: ListProps<T>) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
};

const App: React.FC = () => {
  const numbers = [1, 2, 3, 4];

  return (
    <List
      items={numbers}
      renderItem={(item) => <span>{item}</span>}
    />
  );
};

This code defines a generic List component. Notice the syntax, which acts as a placeholder for the specific data type the component will handle.

• ListProps Interface: This interface defines the props accepted by the List component.

-> items: An array of data of type T.
-> renderItem: A function that takes an item of type T and returns a React node for rendering.

• List Component: This component iterates over the provided items array and renders each item using the renderItem function. Importantly, allows the component to work with any data type.

• App Component: Here, we demonstrate how to use the List component with an array of numbers. The renderItem function simply returns a element displaying the number.
This example showcases how a single generic List component can handle different data types, promoting reusability and type safety.

Beyond the Basics: Advanced Applications of Generics

While this example covers a basic use case, generics can be applied across various scenarios:

• Building custom hooks with type safety.
• Creating generic utility functions for data manipulation.
• Defining typed configurations for different environments.

By strategically using generics, you can significantly enhance your code's flexibility, maintainability, and overall quality.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React optimization, web development, and performance enhancement!

LinkedIn Profile:Abhay Kumar

Ready to explore the power of generics in your TypeScript projects? Start by identifying opportunities where reusable components with type safety can benefit your codebase. With a bit of practice, you'll be building robust and adaptable applications in no time!

🚀 Optimizing Large-Scale React Applications

Abhay Kumar — Sat, 10 Aug 2024 14:38:56 +0000

As applications grow, maintaining performance and scalability becomes crucial. Here are some proven strategies to optimize your React applications:

1. Code Splitting
Why: Load only the necessary parts of your application, reducing the initial load time.

How: Use dynamic import() to split your code at logical points. Tools like Webpack automatically handle this, creating smaller bundles that load on demand.

Example:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

Combine this with React.Suspense for a smooth user experience.

2. Lazy Loading Components
Why: Defer loading of components until they're needed, improving performance for routes that aren't immediately visible.

How: Use React.lazy() and React.Suspense to load components lazily.

Example:

const SomeComponent = React.lazy(() => import('./SomeComponent'));

3. Memoization
Why: Prevent unnecessary re-renders by memoizing components and functions.

How: Use React.memo, useMemo, and useCallback to memoize components, values, and functions.

Example:

const MemoizedComponent = React.memo(function Component({ prop }) {
  return <div>{prop}</div>;
});

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => handleClick(a, b), [a, b]);

4. Avoiding Unnecessary Re-renders
Why: Reduce the rendering workload by preventing components from re-rendering when not necessary.

How: Leverage shouldComponentUpdate, React.memo, useCallback, and useMemo to control re-renders.

Example:
Ensure components are only re-rendered when their props or state change meaningfully.

5. Efficient State Management
Why: Manage state in a way that minimizes re-renders and keeps your application organized.

How: Choose the right state management tool (e.g., Context API, Redux, Zustand, or Recoil) based on the complexity and size of your app.

Example:
Centralize global state in a state management library, while keeping local state at the component level to avoid unnecessary global re-renders.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React optimization, web development, and performance enhancement!

LinkedIn Profile:Abhay Kumar

React #WebDevelopment #PerformanceOptimization #JavaScript #Frontend