Forem: Sivasubramaniyam

Tracking the Very First User Interaction in Next.js — Cross-Tab, Auto-Reset, and SPA-Safe

Sivasubramaniyam — Thu, 06 Nov 2025 09:25:16 +0000

Modern web apps often load analytics or performance scripts on page load — but the real engagement starts only when the user actually interacts.

That’s where the First User Interaction Tracker helps. It detects the very first click or pointer event across all tabs, prevents duplicates,and resets automatically when the browser closes.

Project Overview

Project Name: First User Interaction

Purpose:

Track and synchronize the very first user engagement across browser tabs — ideal for analytics, performance optimization, and user experience metrics.

Features

Feature	Description
Global tracking	Tracks the very first click or pointer interaction in any tab.
Cross-tab sync	Shares the interaction state instantly across all open tabs using `BroadcastChannel`.
Auto-reset	When all browser tabs/windows are closed, the session clears automatically (`sessionStorage`).
No duplicates	Prevents multiple `🎉 First user interaction captured` logs when opening new tabs or navigating.
Path awareness	Logs which route (`pathname`) the event occurred on.
SPA-safe	Works across Next.js client-side navigations without retriggering.

🧾 Output Example


[InteractionListener] 🎉 First user interaction captured at 2025-10-16 06:52:03 on path: /
[InteractionListener] First interaction captured in another tab (live). Path: /saunas
[InteractionListener] First interaction already captured in this tab/session. Path: /about

Why This Matters

This tracker is great for developers who want to:

Measure Time to First Interaction (TTFI) — a true user engagement metric.
Defer heavy scripts until real user action (improving performance).
Start cookie consent or analytics logic only after voluntary interaction.
Maintain cross-tab session state without backend dependency.
Get precise behavior in Next.js client-side routing.

Ideal Use Cases

Use Case	Example
Analytics	Trigger Google Tag Manager or Segment events only after interaction.
Performance	Lazy-load third-party scripts post engagement.
Compliance	Activate cookie consent logic only after user action.
UX Metrics	Measure user engagement timing accurately.
Multi-tab coordination	Prevent duplicate “session start” events across tabs.

Tech Stack

Next.js 14 (App Router)
React 18
BroadcastChannel API
sessionStorage

Demo Setup

Clone the project:

bash git clone https://github.com/Sivamani-18/First-User-Interaction.git cd First-User-Interaction npm install npm run dev`
Open multiple tabs:

http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact

Open DevTools → Console, then click anywhere once — 🎉 You’ll see only one “First user interaction captured” log per browser session.

Author

Sivamaniyam (Sivamani)
Frontend Lead · React / Next.js · Accessibility & Performance Advocate

🔗 GitHub
🌐 Website
💼 LinkedIn

Top Free API Development Tools for Developers

Sivasubramaniyam — Wed, 09 Oct 2024 09:14:41 +0000

When it comes to building, testing, and managing APIs, there are many tools out there. However, not all come free of cost, and finding the right free API development tool for your needs can be tricky. In this article, I’ll share the top free tools that you can use to make your API development smoother and more efficient, without spending a dime.

1. Postman (Free Tier)

Postman is one of the most popular API development tools for designing, testing, and documenting APIs. The free tier offers a range of features for personal use, including the ability to send HTTP requests, inspect responses, and create API collections.

Key Features: API design, testing, monitoring, and documentation.
Use Case: Ideal for testing REST and GraphQL APIs.
Link: Postman

2. Insomnia (Free Version)

Insomnia is a simple but powerful API client for developers who want a clean UI and efficient workflows. The free version provides essential tools for API testing, including support for REST, GraphQL, and even gRPC APIs.

Key Features: REST, GraphQL, and environment variables.
Use Case: Great for quick API testing and development.
Link: Insomnia

3. Hoppscotch

Hoppscotch (formerly Postwoman) is a fast, free, and lightweight API testing tool that works in the browser. It supports REST, GraphQL, and WebSocket protocols and is fully open-source, making it a go-to choice for developers looking for simplicity.

Key Features: API testing, environment variables, collections.
Use Case: Perfect for lightweight and fast API requests.
Link: Hoppscotch

4. Swagger (OpenAPI)

Swagger offers a suite of open-source tools that help developers design, build, and document APIs based on the OpenAPI specification. It's highly regarded for generating interactive documentation and client SDKs for APIs.

Key Features: API design, documentation, and testing based on OpenAPI standards.
Use Case: Best for developers using OpenAPI specs.
Link: Swagger

5. Apidog (Free Tier)

Apidog is an all-in-one API development platform that combines design, debugging, testing, and documentation into a single tool. The free tier offers all essential features for individuals or small teams.

Key Features: API design, testing, debugging, mocking, and documentation.
Use Case: Great for teams needing collaborative API development.
Link: Apidog

6. HTTPie (Free Version)

HTTPie is a command-line HTTP client that offers an intuitive way to make API requests. With a focus on simplicity, it provides readable output that helps developers quickly debug APIs.

Key Features: Command-line interface, clear HTTP responses, supports JSON.
Use Case: Perfect for terminal-based API testing.
Link: HTTPie

7. SoapUI (Open Source Version)

SoapUI is one of the oldest and most powerful tools for API testing, supporting both REST and SOAP APIs. While the Pro version offers advanced features, the free open-source version is still great for basic functional and load testing.

Key Features: Functional and performance testing for SOAP and REST APIs.
Use Case: Ideal for those working with SOAP APIs.
Link: SoapUI

8. Karate DSL

Karate DSL is an open-source API testing framework that allows you to write tests in a domain-specific language (DSL). It’s popular for both REST API testing and load testing, with built-in support for CI/CD integrations.

Key Features: DSL-based testing, CI/CD pipeline integrations.
Use Case: Great for teams that need automated API testing.
Link: Karate DSL

9. Redoc (Free)

Redoc is an open-source tool that generates interactive API documentation from OpenAPI specifications. It’s widely used by developers to provide clear and beautiful API docs, which can be hosted alongside your API.

Key Features: API documentation generation.
Use Case: Perfect for anyone looking to generate API docs from OpenAPI specs.
Link: Redoc

10. Thunder Client (VS Code Extension)

Thunder Client is a lightweight API client built as a VS Code extension. It allows you to send HTTP requests, test APIs, and inspect responses, all from within your code editor.

Key Features: REST and GraphQL API testing within VS Code.
Use Case: Ideal for developers who want to test APIs without leaving their code editor.
Link: Thunder Client

11. RapidAPI (Free Tier)

RapidAPI is both a marketplace and development tool for APIs. You can browse, test, and connect to thousands of public APIs, as well as monitor your own APIs. The free tier provides essential tools for small projects and individual developers.

Key Features: API testing, marketplace, monitoring.
Use Case: Best for developers consuming multiple APIs.
Link: RapidAPI

JWT Authentication in React

Sivasubramaniyam — Tue, 08 Oct 2024 08:10:06 +0000

Introduction:

Briefly introduce the concept of authentication and its importance in web applications.
Explain the role of JWT (JSON Web Tokens) in managing authentication and authorization within React applications.

What is JWT?

Define JWT, detailing its three parts: Header, Payload, and Signature.
Discuss why JWT is favored in modern web applications, especially in Single Page Applications (SPAs) like those built with React.

How JWT Works:

Illustrate the JWT authentication flow specifically in the context of React and a backend (like Node.js/Express).
Included a simple flow diagram.

User Authentication:
- The user provides credentials such as username and password.
- Outputs: User credentials.
Validate Credentials:
- The server validates the provided credentials against its database.
- Outputs: Validation result.
Generate JWT:
- If credentials are valid, the server generates a JWT. This token includes claims like user ID, role, and expiration time, and is signed with a secret key.
- Outputs: Signed JWT.
Send JWT to Client:
- The server sends the JWT back to the client.
- Outputs: JWT sent via HTTP response.
Store JWT on Client:
- The client stores the JWT, typically in local storage or as a cookie.
- Outputs: JWT storage location.
Client Request with JWT:
- For subsequent requests, the client sends the JWT in the request header to access protected routes or resources.
- Outputs: HTTP request with JWT in the Authorization header.
Server JWT Verification:
- The server verifies the JWT's validity using the secret key. It checks the signature, the expiration time, and other claims.
- Outputs: Verification result.
Access Granted or Denied:
- Based on the verification, the server either grants or denies access to the requested resource.
- Outputs: Access response.

Setting Up JWT Authentication in React:

Backend Setup (using Node.js/Express):
- Code to create an authentication route that issues JWTs.

   const jwt = require('jsonwebtoken');
   const express = require('express');
   const app = express();

   app.post('/login', (req, res) => {
       const { username, password } = req.body;
       // User validation logic here
       const token = jwt.sign({ username }, 'your_secret_key', { expiresIn: '1h' });
       res.json({ token });
   });

React Setup:
- Installation of dependencies (axios for HTTP requests).
- Creating a login form component.
- Handling the JWT on client side (storing, sending with requests).

   import React, { useState } from 'react';
   import axios from 'axios';

   function LoginForm() {
       const [username, setUsername] = useState('');
       const [password, setPassword] = useState('');

       const handleSubmit = async (event) => {
           event.preventDefault();
           const { data } = await axios.post('http://localhost:3000/login', { username, password });
           localStorage.setItem('token', data.token); // Storing the token in localStorage
           // Redirect or handle login success
       };

       return (
           <form onSubmit={handleSubmit}>
               <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
               <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
               <button type="submit">Login</button>
           </form>
       );
   }

   export default LoginForm;

Protecting Routes in React:
- Using React Router to protect routes that require authentication.
- Example of a private route component.

   import { Route, Redirect } from 'react-router-dom';

   const PrivateRoute = ({ component: Component, ...rest }) => (
       <Route {...rest} render={(props) => (
           localStorage.getItem('token')
               ? <Component {...props} />
               : <Redirect to='/login' />
       )} />
   );

Security Considerations:

Discuss securing the secret key and the significance of HTTPS.
Address common security concerns like XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgery) in the context of a React application.

Best Practices:

Use environment variables to manage secrets.
Set an expiration time for tokens.
Use secure and HttpOnly cookies if applicable.

Conclusion:

Summarize the key points about implementing JWT in React projects.
Emphasize the importance of security in authentication mechanisms.

What is `Suspense` in React?

Sivasubramaniyam — Thu, 03 Oct 2024 06:18:27 +0000

Suspense is a powerful feature in React that allows developers to control the loading state of components and manage asynchronous rendering more effectively. It was introduced to improve user experiences when working with slow-loading resources, such as data fetching or lazy-loaded components. With Suspense, React can "suspend" the rendering of part of the UI while waiting for some asynchronous task to complete, like fetching data from a server or loading code for a large component, and display fallback content in the meantime.

How Does `Suspense` Work?

At its core, Suspense acts as a boundary around one or more components. When the components inside the boundary aren't ready (i.e., still loading), Suspense will show a placeholder (or fallback) content. Once the data or the lazy component becomes available, the UI updates automatically.

A simple example of how Suspense is used with React's lazy for code-splitting:

import React, { Suspense, lazy } from 'react';

// Dynamically importing a component
const MyLazyComponent = lazy(() => import('./MyLazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

In this example:

The MyLazyComponent is loaded dynamically using React.lazy().
While the component is being loaded, the Suspense component shows a Loading... message as fallback content.
Once the component is fully loaded, the fallback is replaced by the actual component.

Use Cases for `Suspense`

Lazy Loading Components: Suspense is often used with React.lazy() to load components only when they are needed. This helps reduce the initial bundle size and improve app performance.
Data Fetching (Future Support): While not officially supported at the time of writing, React’s team is working on features that will allow Suspense to be used for data fetching with React Server Components and concurrent rendering. This will provide a more declarative and easy-to-manage approach for loading states when fetching data asynchronously.
Error Boundaries: Paired with Error Boundaries, you can handle errors that occur during the loading of components or data fetches, giving you more control over user experience.

Benefits of Using `Suspense`

Improved User Experience: Users see meaningful loading states rather than an unresponsive UI.
Code Splitting: With React.lazy() and Suspense, you can load components only when needed, reducing initial load time.
Fine-Grained Loading Control: Instead of managing loading states at the component level, you can declaratively set up boundaries with Suspense and React will handle the state transitions for you.

Future of `Suspense`

As of now, Suspense is primarily used for lazy-loading components, but the React team is working on extending its capabilities for data fetching in concurrent mode. This will let you use Suspense not just to load code, but also to wait for data to arrive. This future vision ties closely with server-side rendering and new features like React Server Components and Concurrent Mode, which aim to improve the developer experience and performance of React apps.

Conclusion

Suspense is a game-changing feature in React that simplifies managing asynchronous operations like lazy-loading components or, eventually, fetching data. By providing a declarative way to handle loading states, Suspense makes the UI more responsive and the code cleaner. With the ongoing improvements to the React ecosystem, Suspense will only become more powerful in the future.

React App’s Performance with Lazy Loading

Sivasubramaniyam — Thu, 03 Oct 2024 05:39:13 +0000

Introduction

In the modern world of web development, speed and performance are key. As your React app grows, its bundle size increases, which can slow down load times. Lazy loading is an optimization technique that allows you to load components only when they are needed, helping you reduce the initial load time and improve performance.

What is Lazy Loading?

Lazy loading (or code splitting) is the practice of delaying the loading of resources (like components) until they are actually needed. This helps in improving the app's performance by reducing the initial load size.

For example, in a multi-page app, there's no need to load components for all the routes upfront. You can load them when the user navigates to a specific route. This reduces the initial bundle size and improves load times, especially on slower networks.

Why Lazy Loading Matters?

Reduced Initial Load Time: By loading only the essential components first, the initial bundle size is smaller, resulting in faster loading times.
Optimized Bandwidth Usage: Unnecessary resources are not fetched until required, reducing data usage.
Enhanced User Experience: Faster loading apps provide a better user experience, leading to higher user retention and engagement.

How to Implement Lazy Loading in React

React has built-in support for lazy loading using React.lazy and Suspense, which were introduced in React 16.6.

Basic Example with `React.lazy` and `Suspense`

Importing Components Normally:

   import MyComponent from './MyComponent';

In this case, MyComponent is loaded as part of the initial bundle.

Lazy Loading the Component: Use React.lazy to dynamically load the component only when it's needed:

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

Using Suspense for Fallbacks: Since lazy loading components takes time, React provides the Suspense component to show a fallback UI (like a loading spinner) while the lazy-loaded component is being fetched.

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       <div>
         <Suspense fallback={<div>Loading...</div>}>
           <MyComponent />
         </Suspense>
       </div>
     );
   }
   export default App;

In this example, when MyComponent is needed, React dynamically imports it and shows a loading message until the component is ready.

Lazy Loading Routes

Lazy loading is particularly useful for large applications with multiple routes. React Router allows for easy lazy loading of route components.

Install react-router-dom if you haven’t already:

   npm install react-router-dom

Here’s an example of how to lazy load routes:

   import React, { Suspense } from 'react';
   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

   const Home = React.lazy(() => import('./pages/Home'));
   const About = React.lazy(() => import('./pages/About'));

   function App() {
     return (
       <Router>
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
           </Routes>
         </Suspense>
       </Router>
     );
   }
   export default App;

In this example, the Home and About components are lazy-loaded only when their respective routes are visited.

Advanced Tips for Lazy Loading

Preloading Components: Sometimes, you might want to preload components before they are needed (e.g., when hovering over a link). This can be done by dynamically importing the component when certain conditions are met.

   const preloadAbout = () => {
     import('./pages/About');
   };

Chunk Naming: Webpack allows you to name the chunks when using lazy loading, which can be helpful for debugging and performance monitoring.

   const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

Error Boundaries: Lazy loading may fail due to network issues. Using an error boundary will help handle such cases gracefully.

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

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

     render() {
       if (this.state.hasError) {
         return <div>Error loading component!</div>;
       }
       return this.props.children;
     }
   }

   // Usage
   <ErrorBoundary>
     <Suspense fallback={<div>Loading...</div>}>
       <MyComponent />
     </Suspense>
   </ErrorBoundary>

Performance Considerations

While lazy loading can significantly boost performance, it should be used strategically. Overloading an application with too many lazy-loaded components can introduce latency when navigating between routes or rendering components. Always balance lazy loading with the user experience to avoid "too much" loading at runtime.

Conclusion

Lazy loading is an effective way to improve the performance of your React applications. By loading components only when they are needed, you can reduce the initial bundle size, save bandwidth, and provide a better experience for users.

Implementing lazy loading is straightforward with React.lazy and Suspense, and when combined with React Router, you can efficiently lazy load routes in your app. Use these techniques to optimize your React app today!

Extra Resources

React Calendar & Date Picker

Sivasubramaniyam — Sun, 22 Sep 2024 05:05:03 +0000

🚀 Introducing `react-multi-date-picker-calendar` – An Accessible & Customizable Date Picker for React 📅

When building web applications, accessibility and simplicity are often the two most sought-after features. That's why I created the react-multi-date-picker-calendar a versatile and accessible date picker libray for React. In this article, I’ll walk you through its key features and show how you can easily integrate it into your project.

Why I Built This Library

As a front-end developer, I noticed a gap in the availability of accessible and user-friendly date picker components. While there are many excellent date picker libraries out there, I wanted to build one that emphasizes:

Accessibility: Support for keyboard navigation and screen readers.
Customizability: The ability to easily style and adapt to different use cases.
Simplicity: A simple API with the power to support both single-date and multi-date selections, including date ranges.

NPM Package

Features

Single or Multi-Date Selection: You can choose one or multiple dates effortlessly.
Range Selection: Enable date range picking for more flexible date management.
Disabled Dates: Exclude specific dates from selection based on your requirements.
Appointment Management: Display dates with specific statuses such as ‘Completed,’ ‘Missed,’ or ‘Cancelled.’
Accessible: Designed with ARIA attributes and keyboard navigation in mind.
Customizable: Pass in your own styles, icons, and behaviors to make the component your own.

Installation

To get started, you can install the package using npm:

npm install react-multi-date-picker-calendar

Full Documentation

Basic Usage

Here’s a simple example that demonstrates how you can integrate the calendar into your app:

import React from "react";
import Calendar from "react-multi-date-picker-calendar";

const App = () => {
  const handleDateChange = (dates) => {
    console.log("Selected Dates:", dates);
  };

  return (
    <div>
      <h1>My App</h1>
      <Calendar onChange={handleDateChange} />
    </div>
  );
};

export default App;

Multi-Date Selection Example

import React from "react";
import Calendar from "react-multi-date-picker-calendar";

const App = () => {
  const handleDateChange = (dates) => {
    console.log("Selected Dates:", dates);
  };

  return <Calendar multiSelect onChange={handleDateChange} />;
};

export default App;

Range Selection Example

import React from "react";
import Calendar from "react-multi-date-picker-calendar";

const App = () => {
  const handleDateChange = (dates) => {
    console.log("Selected Dates:", dates);
  };

  return <Calendar selectsRange onChange={handleDateChange} />;
};

export default App;

Customization

The react-multi-date-picker-calendar allows you to easily customize its look and feel. You can pass custom icons, enable/disable specific dates, or even show appointments with their statuses.

Customizing Appointment Status

import React from "react";
import Calendar, {
  logSelectedDatesAppointments,
  Appointment
} from "react-multi-date-picker-calendar";

const App = () => {
  const appointments: Appointment[] = [
    { date: new Date('2023-08-10'), status: 'Completed' },
    { date: new Date('2023-08-11'), status: 'Missed' }
  ];

  const handleDateChange = (selectedDates: Date[]) => {
    const selectedAppointments = logSelectedDatesAppointments(
      selectedDates,
      appointments
    );
    console.log("Selected Dates Appointments:", selectedAppointments);
  };

  return (
    <Calendar
      onChange={handleDateChange}
      appointments={appointments}
    />
  );
};

export default App;

Styling

You can style the calendar using the provided CSS classes or completely customize it with your own styles. Here’s a small example of how you can customize its appearance:

.calendar-container {
  background-color: #fff;
  border: 1px solid #e0e0e0;
}

.calendar-day.selected {
  background-color: #007bff;
  color: #fff;
}

Accessibility

A key focus of the react-multi-date-picker-calendar is accessibility. With built-in support for keyboard navigation and ARIA attributes, this component ensures that users with disabilities can interact with the calendar seamlessly.

Conclusion

I’m excited to share this new React component with the developer community, and I hope it helps streamline the date-picking process in your applications. You can install the package, and start integrating it into your projects today!

🌀 Redux: Using createSlice and createAsyncThunk for Cleaner State Management

Sivasubramaniyam — Sun, 22 Sep 2024 04:09:47 +0000

React Learning Guide

State management in React applications can be challenging, especially when dealing with complex data flows and asynchronous operations. Redux has long been a popular choice for managing state, but it came with boilerplate and complexity. Enter Redux Toolkit, the official, recommended way to write Redux logic. It provides a powerful yet easy-to-use API that simplifies common tasks like creating reducers, actions, and handling side effects.

In this article, we will explore createSlice and createAsyncThunk from Redux Toolkit, demonstrating how they help manage both synchronous and asynchronous state changes with minimal code.

Why Redux Toolkit?

Redux Toolkit addresses many pain points of traditional Redux:

Less boilerplate: createSlice lets you define the initial state, reducers, and actions all in one place.
Built-in Thunks: createAsyncThunk provides a streamlined way to handle async operations like API calls.
Immutability and Immer: Redux Toolkit uses Immer under the hood, allowing us to write "mutative" logic in reducers that is safely converted to immutable updates.

Getting Started

Before we dive into code, make sure you have Redux Toolkit installed:

npm install @reduxjs/toolkit react-redux

Example: Fetching Data with `createAsyncThunk` and `createSlice`

In this example, we'll create a simple slice of state that handles fetching data from an API. We'll use createAsyncThunk to handle the asynchronous data fetching and createSlice to manage the state and reducers.

Step 1: Setting Up `createSlice` and `createAsyncThunk`

Let's create a new slice to manage a list of posts:

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

// Step 1: Create an async thunk for fetching posts
export const fetchPosts = createAsyncThunk(
  "posts/fetchPosts",
  async (_, thunkAPI) => {
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const data = await response.json();
      return data;
    } catch (error) {
      return thunkAPI.rejectWithValue({ error: error.message });
    }
  }
);

// Step 2: Create a slice
const postsSlice = createSlice({
  name: "posts",
  initialState: {
    posts: [],
    status: "idle", // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
  },
  reducers: {
    // You can define synchronous reducers here if needed
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.payload.error;
      });
  },
});

export default postsSlice.reducer;

Step 2: Setting Up the Redux Store

Now that we have our slice, let's set up the Redux store and add the posts reducer:

// src/app/store.js
import { configureStore } from "@reduxjs/toolkit";
import postsReducer from "../features/posts/postsSlice";

export const store = configureStore({
  reducer: {
    posts: postsReducer,
  },
});

Step 3: Using the Slice in a Component

Now, let's use this slice in a component to fetch and display the posts:

// src/components/PostsList.js
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchPosts } from "../features/posts/postsSlice";

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === "idle") {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  if (status === "loading") {
    return <div>Loading...</div>;
  }

  if (status === "failed") {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h2>Posts</h2>
      {posts.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsList;

Step 4: Integrating the Component in Your App

Finally, wrap your main component with Provider to connect the Redux store:

// src/App.js
import React from "react";
import { Provider } from "react-redux";
import { store } from "./app/store";
import PostsList from "./components/PostsList";

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <PostsList />
      </div>
    </Provider>
  );
}

export default App;

Recap

In this example, we covered the following:

Using createAsyncThunk to handle asynchronous actions like API calls.
Using createSlice to define a slice of state, reducers, and actions.
Setting up a Redux store using configureStore.
Connecting Redux state to a React component using useSelector and useDispatch.

Redux Toolkit makes it simpler to write Redux logic, reducing boilerplate and adding helpful utilities. With createAsyncThunk, we can easily manage complex async workflows, while createSlice allows us to define reducers and actions in one place.

Conclusion

Redux Toolkit significantly simplifies state management in React applications. By using createSlice and createAsyncThunk, you can handle both synchronous and asynchronous state updates in a more manageable way. Whether you're a beginner or an experienced developer, Redux Toolkit's streamlined API helps you build scalable and maintainable applications.

`useCallback` vs `useMemo` Hooks

Sivasubramaniyam — Thu, 19 Sep 2024 08:02:11 +0000

React Learning Guide

Boosting React Performance: `useCallback` vs. `useMemo` Hooks

React's useCallback and useMemo hooks are crucial for optimizing performance in your applications. Understanding when and how to use them can save you from unnecessary re-renders and ensure your app runs smoothly. In this article, we'll dive into real-world examples of using useCallback and useMemo effectively.

When to Use `useCallback`

The useCallback hook returns a memoized version of the callback function, which means it only recreates the function if one of its dependencies changes. This is particularly useful when passing functions as props to child components to prevent them from re-rendering unnecessarily.

Real-time Example: Preventing Unnecessary Re-renders

Suppose you have a parent component that passes a function to a child component. Without useCallback, the child component would re-render every time the parent component renders, even if the function logic hasn't changed.

import React, { useState, useCallback, memo } from 'react';

const ChildComponent = memo(({ onIncrement }) => {
  console.log('Child component re-rendered');
  return <button onClick={onIncrement}>Increment</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

export default ParentComponent;

Explanation:

Memoizing the child component (memo(ChildComponent)): By wrapping ChildComponent in memo, it will now only re-render when its props change (in this case, when onIncrement changes).
useCallback: This ensures that the handleIncrement function does not change on every render, preventing the child from re-rendering unnecessarily due to prop changes.

When to Use `useMemo`

The useMemo hook is used to memoize the result of a function, recomputing the cached result only when one of its dependencies changes. It's useful for optimizing performance in situations where a function performs an expensive calculation.

Real-time Example: Optimizing Expensive Computations

Let's say you have a component that performs a computationally expensive operation, like filtering a large list.

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExpensiveComponent;

In this example, useMemo is used to cache the result of filtering the items array. This way, the expensive filtering operation is only recalculated when items or filter changes, avoiding unnecessary computations.

Guidelines for Using `useCallback` and `useMemo`

Use useCallback when passing functions to child components to avoid unnecessary re-renders.
Use useMemo for expensive computations that don't need to be recalculated on every render.
Avoid overusing them. Memoization adds complexity and can sometimes make code harder to read. Only use them when you identify a performance issue.
Remember the dependencies array. Always specify dependencies accurately; otherwise, you might run into bugs or unexpected behavior.

Conclusion

React's useCallback and useMemo hooks are powerful tools for optimizing component performance by avoiding unnecessary re-renders and expensive calculations. By carefully applying these hooks, you can ensure your React application runs efficiently.

Boost React Performance with useMemo: Stop Unnecessary Re-renders 🚀

Sivasubramaniyam — Thu, 19 Sep 2024 07:42:34 +0000

React Learning Guide

Optimize React with `useMemo`: Avoid Unnecessary Re-rendering 🚀

React's rendering process can become inefficient when components re-render unnecessarily. This is especially true for complex components with heavy computations or when rendering large lists. Luckily, React provides a handy hook called useMemo to help us optimize these scenarios by memoizing computed values. Let's dive into how useMemo can be leveraged to boost performance, with practical examples. 💡

What is `useMemo`? 🤔

useMemo is a React hook that memoizes the result of a computation. When you use useMemo, it stores the computed result and only recomputes it if one of its dependencies changes. This avoids unnecessary recalculations and, ultimately, unnecessary re-renders. 🎯

Syntax of `useMemo` 📝

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

First argument: A function that computes the value you want to memoize.
Second argument: An array of dependencies. If any of these dependencies change, the function will recompute the value.

When to Use `useMemo` 🕰️

Use useMemo when:

Heavy Computation 🧮: Your component performs a computationally expensive task, like filtering a large dataset.
Stable References 📏: When passing objects or functions as props to child components that rely on referential equality (===), useMemo can ensure that these references are stable unless needed to change.
Large List Filter 📜: Optimizing a Large List Filter with useMemo.

Example 1: Memoizing a Heavy Computation ⚡

Let's consider a component that calculates the factorial of a number. Computing the factorial of large numbers can be resource-intensive, so it's a good candidate for useMemo.

import React, { useState, useMemo } from 'react';

const factorial = (n) => {
  console.log('Calculating factorial...');
  if (n < 0) return -1;
  if (n === 0) return 1;
  return n * factorial(n - 1);
};

const FactorialComponent = () => {
  const [number, setNumber] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // Memoize the factorial computation
  const memoizedFactorial = useMemo(() => factorial(number), [number]);

  return (
    <div>
      <h2>Factorial Calculator</h2>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <p>Factorial: {memoizedFactorial}</p>
      <button onClick={() => setOtherState(!otherState)}>
        Re-render Component
      </button>
    </div>
  );
};

export default FactorialComponent;

In this example, factorial is memoized using useMemo. The factorial calculation only runs when number changes. Clicking the "Re-render Component" button does not trigger the factorial calculation because number hasn't changed. 🎉

Why it Matters 🧐

Without useMemo, the factorial calculation would run every time the component re-renders, regardless of whether number changed or not. This can degrade performance significantly in complex apps. 🚀

Example 2: Stable References for Child Components 🛠️

When you pass an object or function as a prop to a child component, React will re-render that child component whenever the parent re-renders. This happens because the reference to the object or function changes. Using useMemo can help stabilize these references. 📐

import React, { useState, useMemo } from 'react';

const ChildComponent = React.memo(({ data }) => {
  console.log('ChildComponent rendered');
  return <div>Data: {data.value}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Memoize the data object to prevent unnecessary re-renders of ChildComponent
  const memoizedData = useMemo(() => ({ value: count }), [count]);

  return (
    <div>
      <h2>Parent Component</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ChildComponent data={memoizedData} />
    </div>
  );
};

export default ParentComponent;

Explanation 📖

Here, ParentComponent renders ChildComponent and passes an object ({ value: count }) as a prop. If we didn't use useMemo, ChildComponent would re-render every time the parent re-renders, even if count hasn't changed, because the object reference would be different.

Using useMemo, the memoizedData object only changes when count changes, avoiding unnecessary re-renders of ChildComponent. 🎯

Example 3: Optimizing a Large List Filter with `useMemo` 🗂️

Let's say you have a component that displays a large list of products and allows users to search through them. Filtering the list can be computationally expensive, especially when the list is large. useMemo can be used here to optimize the filtering process so that it only recomputes the filtered list when the search query changes. 🛍️

import React, { useState, useMemo } from 'react';

// Sample large dataset of products
const products = Array.from({ length: 10000 }, (_, index) => ({
  id: index,
  name: `Product ${index + 1}`,
  description: `Description of product ${index + 1}`,
}));

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');

  // Memoize the filtered list to avoid unnecessary recomputations
  const filteredProducts = useMemo(() => {
    console.log('Filtering products...');
    if (!searchQuery) return products;
    return products.filter((product) =>
      product.name.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [searchQuery]);

  return (
    <div>
      <h2>Product List</h2>
      <input
        type="text"
        placeholder="Search products..."
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>
            {product.name}: {product.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Explanation 💬

Large Dataset: The products array simulates a large dataset with 10,000 items.
Filtering Logic: Inside the component, the useMemo hook memoizes the filtered list of products based on the searchQuery.
Dependency Array: The useMemo hook only recalculates the filtered list when searchQuery changes. If searchQuery remains the same, it returns the memoized list from the previous render.
Console Logging: The console.log('Filtering products...') line shows when the filtering operation is triggered. You'll notice it only runs when searchQuery changes, not on every keystroke or re-render.

When NOT to Use `useMemo` 🚫

While useMemo can enhance performance, it also adds some complexity and may introduce bugs if used improperly. You should avoid using useMemo when:

The computation is cheap, and memoizing it won't bring noticeable performance improvements.
Premature optimization: It's often better to identify bottlenecks first rather than optimizing without profiling.

Conclusion 🏁

useMemo is a powerful tool for optimizing React applications by preventing unnecessary recalculations and re-renders. However, like any optimization technique, it should be used judiciously. It's most beneficial when dealing with expensive computations or when ensuring stable references for props.

By using useMemo effectively, you can make your React applications more performant and responsive, especially when dealing with complex rendering logic. 🏎️💨

20 Must-Know Websites and Tools for Web Developers 🌐🧑‍💻🚀

Sivasubramaniyam — Tue, 17 Sep 2024 09:29:41 +0000

1. DevDocs 📚

An all-in-one API documentation aggregator, offering offline access to documentation for various programming languages, libraries, and frameworks. It's an essential quick reference tool for any developer.

2. LambdaTest Free Online Tools 🧪

A suite of free tools for developers, including cross-browser testing, responsive design testing, and more. Ensuring your website works across different browsers is crucial, making this an invaluable toolset.

3. CodeSandbox 🏖️

An online code editor and prototyping tool that allows you to create web applications using multiple languages and frameworks. It’s essential for quickly testing and sharing projects.

4. Responsively App 📱

A free, open-source developer tool that helps you make your web development process more efficient. Simultaneously previewing your website on different devices is a huge time-saver.

5. Polypane 🧩

A browser specifically for responsive design, development, and testing. It allows you to see your site in multiple viewports at once, catching issues early in the development process.

6. Ping Test 🌐

A free tool to test your website's speed, uptime, and reliability. Performance is key to user experience and SEO, making this tool essential for ongoing site maintenance.

7. free-for.dev 💸

A curated list of free tools and services for developers. From hosting to testing, this resource can help you find free alternatives for various aspects of development, crucial for budget-conscious projects.

8. JSONPlaceholder 📊

A free fake online REST API for testing and prototyping. It’s an excellent resource for front-end developers needing dummy data to simulate API calls during development.

9. Web.dev 🌐

A resource from Google to help developers build fast, accessible, and secure websites. It includes guides, tools like Lighthouse, and tips for improving web performance.

10. UI Verse 🎨

A collection of free, open-source UI components and design inspiration. It helps speed up development by offering pre-designed elements, especially useful for quick mockups and prototyping.

11. Figma 🎨

A collaborative design tool perfect for UI/UX designers and developers. Design and prototyping in Figma streamline the design-to-development handoff.

12. Shots.so 📸

Create stunning screenshots of your code or designs. Ideal for showcasing your work in portfolios, presentations, or on social media.

13. LandingFolio 📄

A curated gallery of the best landing page designs. It’s useful for finding inspiration and ideas for designing effective landing pages.

14. Carbon 🖼️

Create beautiful images of your source code. Great for sharing code snippets in presentations, documentation, or social media with a polished look.

15. Mobbin 📱

A library of hand-picked mobile design patterns from popular apps. Useful for understanding current mobile UI/UX trends and finding design inspiration.

16. Tiny Wow 🛠️

A suite of free, simple online tools for tasks like image and PDF conversions. Handy for quick file manipulations without the need for additional software.

17. Placeholder.com 🖼️

A simple tool for generating placeholder images with customizable sizes and formats. Handy when you need temporary image assets during development.

18. Lorem Picsum 🖼️

A free API to generate placeholder images with different sizes and categories. Useful for web developers needing placeholder graphics in their projects.

19. Hemingway Editor ✍️

An online tool that helps you write clear and concise text. Useful for developers who need to document projects, write blog posts, or create website content.

20. Glitch 💻

An online coding environment for creating and deploying web applications in real-time. It’s great for quick prototyping and sharing projects but may be less frequently used than other tools listed.

Conclusion 🚀

This ranked list prioritizes tools based on their general utility for web developers, from essential documentation and testing tools to design inspiration and code-sharing platforms. Integrating these resources into your workflow can significantly boost productivity and enhance the quality of your work. Happy coding! 🎉👨‍💻👩‍💻

10 Essential Websites Every Web Developer Should Know 🧑‍💻🌐

Sivasubramaniyam — Tue, 17 Sep 2024 08:43:49 +0000

As a web developer, having the right resources at your fingertips can make all the difference in your workflow and learning process. Whether you're a seasoned pro or just starting your journey, these 10 websites are invaluable for coding, learning, and finding inspiration. Let's dive into the essential websites every web developer should know.

1. MDN Web Docs

A comprehensive resource for web standards, including HTML, CSS, JavaScript, and web APIs. MDN Web Docs is maintained by Mozilla and provides in-depth documentation, tutorials, and guides. It's an indispensable reference for both beginners and experienced developers.

2. W3Schools

W3Schools offers tutorials, references, and examples covering a wide range of web technologies like HTML, CSS, JavaScript, SQL, and more. It's beginner-friendly and perfect for quick lookups when you need to recall syntax or learn a new concept on the fly.

3. freeCodeCamp

A free platform that provides coding challenges, projects, and certifications in web development, data visualization, APIs, and more. It's a great place to build hands-on experience and become a part of a community of learners and developers.

4. CSS-Tricks

CSS-Tricks is a go-to resource for all things CSS, offering articles, tutorials, and guides on CSS techniques, design patterns, and front-end development best practices. It's a fantastic site for finding solutions to complex CSS issues and keeping up with the latest trends.

5. Frontend Mentor

Frontend Mentor provides real-world HTML, CSS, and JavaScript challenges that can help you improve your coding skills by building projects based on real-world design briefs. It’s an excellent way to build your portfolio with practical, hands-on projects.

6. DevDocs

DevDocs is an extensive API documentation aggregator for web development. It combines documentation for languages, libraries, and frameworks into a single, searchable interface. If you need quick access to documentation without the need to search multiple websites, DevDocs is your go-to.

7. CodePen

An online community for testing and showcasing HTML, CSS, and JavaScript code snippets. CodePen is an excellent place to explore creative coding projects, get inspiration, and share your own work with the developer community.

8. Can I Use

A website that provides up-to-date browser support tables for front-end web technologies. It helps developers ensure cross-browser compatibility for their projects, saving time on debugging and improving the user experience.

9. Awwwards

Awwwards showcases the best web design trends, featuring outstanding websites from designers and agencies worldwide. It's a great source of inspiration for UI/UX design and helps you stay up to date with the latest design trends.

10. Smashing Magazine

A platform that offers in-depth articles, tutorials, and resources on web design, front-end development, and UX/UI. Smashing Magazine is a valuable source of information for staying updated with the latest trends and best practices in the industry.

Feel free to bookmark these resources and refer back to them whenever you need guidance or inspiration. Happy coding!

Mastering React: A Comprehensive Learning Guide

Sivasubramaniyam — Tue, 17 Sep 2024 07:00:51 +0000

Welcome to a thorough journey through React and its ecosystem! This guide will provide you with a structured path for mastering React, from understanding basic concepts to exploring advanced topics in React and associated technologies.

Getting Started with React

React is a powerful JavaScript library for building user interfaces, mainly for single-page applications where you need a fast interaction with the user. Here are the foundational concepts you should grasp:

Components: Reusable and encapsulating elements that manage their own state and compose to form complex UIs.
JSX: JavaScript XML allows you to write HTML in React.
TSX: TypeScript allows you to write HTML in React.
Props: Short for properties, these are read-only attributes used to pass data to components.
State: Holds data about the component that may change over time.
Events: Handlers that manage user interactions.
Conditional Rendering: Render UI elements based on certain conditions.
Sample APIs: Click here

Important React Hooks

Hooks are a new addition in React 16.8 that allow you to use state and other React features without writing a class.

useState: Manage state in functional components.
useEffect: Perform side effects in function components.
useRef: Access DOM nodes directly in React.
useContext: Share values between components without passing props explicitly.
useReducer: An alternative to useState for more complex state logic.
useMemo and useCallback: Optimize performance by memoizing functions and values.

React UI Libraries and Frameworks

React is versatile, and you can enhance your applications with numerous UI libraries:

Material UI: Robust React components for faster and easier web development.
Chakra UI: Simple, modular, and accessible component library.
Ant Design: Design system for enterprise-level products.
React Bootstrap: Rebuild of Bootstrap with components.
Rebass: Minimalistic and responsive React primitives.
Blueprint: UI toolkit for the web.

Popular React Packages

React Router: Declarative routing for React apps.
Axios: Promise-based HTTP client.
React Query: Fetch, cache, and update data in your React applications.
React Hook Form: Performant, flexible, and extensible forms with easy validation.
Styled Components: Use the best bits of ES6 and CSS to style your apps.
Storybook: UI component explorer for front-end developers.
Framer Motion: A powerful animation library for React.

State Management in React

Managing state is crucial for building reliable applications:

Redux: Predictable state container.
MobX: Simple, scalable state management.
Hookstate: The modern, incredibly fast, and extendable state management solution.
Recoil: An experimental state management library for React.
Akita: A state management pattern.

Advanced Learning

After you're comfortable with React, consider learning these technologies to expand your development skills:

Next.js: A React framework for server-rendered apps.
Gatsby: A framework based on React for building websites.
TypeScript: Add types to JavaScript to improve your code quality and scalability.
React Native: Build mobile apps with React.
Electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS.

Deep Dive into Next.js

When delving into Next.js, focus on these aspects:

Server-Side Rendering (SSR) & Static Site Generation (SSG)
Incremental Static Regeneration (ISR)
Dynamic Pages
CSS/SASS Modules
Lazy Loading Modules
API Routes

React's ecosystem is vast and full of opportunities to build powerful applications. Whether you're a beginner or an experienced developer, this guide aims to enhance your skills and understanding of React and its associated technologies.

Happy coding!

Forem: Sivasubramaniyam

Tracking the Very First User Interaction in Next.js — Cross-Tab, Auto-Reset, and SPA-Safe

Project Overview

Features

🧾 Output Example

Why This Matters

Ideal Use Cases

Tech Stack

Demo Setup

Author

Top Free API Development Tools for Developers

1. Postman (Free Tier)

2. Insomnia (Free Version)

3. Hoppscotch

4. Swagger (OpenAPI)

5. Apidog (Free Tier)

6. HTTPie (Free Version)

7. SoapUI (Open Source Version)

8. Karate DSL

9. Redoc (Free)

10. Thunder Client (VS Code Extension)

11. RapidAPI (Free Tier)

JWT Authentication in React

Introduction:

What is JWT?

How JWT Works:

Setting Up JWT Authentication in React:

Security Considerations:

Best Practices:

Conclusion:

What is `Suspense` in React?

How Does Suspense Work?

Use Cases for Suspense

Benefits of Using Suspense

Future of Suspense

Conclusion

React App’s Performance with Lazy Loading

Introduction

What is Lazy Loading?

Why Lazy Loading Matters?

How to Implement Lazy Loading in React

Basic Example with React.lazy and Suspense

Lazy Loading Routes

Advanced Tips for Lazy Loading

Performance Considerations

Conclusion

Extra Resources

React Calendar & Date Picker

🚀 Introducing react-multi-date-picker-calendar – An Accessible & Customizable Date Picker for React 📅

Why I Built This Library

NPM Package

Features

Installation

Full Documentation

Basic Usage

Multi-Date Selection Example

Range Selection Example

Customization

Customizing Appointment Status

Styling

Accessibility

Conclusion

🌀 Redux: Using createSlice and createAsyncThunk for Cleaner State Management

Why Redux Toolkit?

Getting Started

Example: Fetching Data with createAsyncThunk and createSlice

Step 1: Setting Up createSlice and createAsyncThunk

Step 2: Setting Up the Redux Store

Step 3: Using the Slice in a Component

Step 4: Integrating the Component in Your App

Recap

Conclusion

`useCallback` vs `useMemo` Hooks

Boosting React Performance: useCallback vs. useMemo Hooks

When to Use useCallback

Real-time Example: Preventing Unnecessary Re-renders

When to Use useMemo

Real-time Example: Optimizing Expensive Computations

Guidelines for Using useCallback and useMemo

Conclusion

How Does `Suspense` Work?

Use Cases for `Suspense`

Benefits of Using `Suspense`

Future of `Suspense`

Basic Example with `React.lazy` and `Suspense`

🚀 Introducing `react-multi-date-picker-calendar` – An Accessible & Customizable Date Picker for React 📅

Example: Fetching Data with `createAsyncThunk` and `createSlice`

Step 1: Setting Up `createSlice` and `createAsyncThunk`

Boosting React Performance: `useCallback` vs. `useMemo` Hooks

When to Use `useCallback`

When to Use `useMemo`

Guidelines for Using `useCallback` and `useMemo`

Optimize React with `useMemo`: Avoid Unnecessary Re-rendering 🚀

What is `useMemo`? 🤔

Syntax of `useMemo` 📝

When to Use `useMemo` 🕰️

Example 3: Optimizing a Large List Filter with `useMemo` 🗂️

When NOT to Use `useMemo` 🚫