Forem: Manav Bajaj

🚀 Mastering React’s useState and useRef: A Stopwatch Example

Manav Bajaj — Thu, 05 Jun 2025 11:47:36 +0000

React’s useState and useRef hooks are a dynamic duo for building interactive UIs. useState manages reactive state, triggering re-renders to update the UI when values change. useRef, on the other hand, holds mutable values that persist across renders without causing re-renders—perfect for storing data like timers or DOM references. Together, they enable clean, efficient solutions for features like counters or timers.

Below, I’ve shared a stopwatch app that combines useState and useRef to track elapsed time with start, stop, and reset functionality. Let’s break down how it works!

import { useState, useRef } from 'react';
import './App.css';

function App() {
  // State to store the start time of the current timer session
  const [startTime, setStartTime] = useState(null);
  // State to store the current time, updated every 10ms for real-time display
  const [now, setNow] = useState(null);

  // Ref to store the interval ID for cleanup
  const intervalRef = useRef(null);
  // Ref to store cumulative elapsed time across start/stop cycles
  const leapTimeRef = useRef(0);

  // Starts the stopwatch
  const handleStart = () => {
    const currentTime = Date.now(); // Get current timestamp
    setStartTime(currentTime); // Set start time
    setNow(currentTime); // Initialize current time for display
    clearInterval(intervalRef.current); // Clear any existing interval
    // Start interval to update 'now' every 10ms
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  };

  // Stops the stopwatch and accumulates elapsed time
  const handleStop = () => {
    clearInterval(intervalRef.current); // Stop the interval
    if (startTime != null && now != null) {
      // Add elapsed time of current session to leapTimeRef
      leapTimeRef.current += (now - startTime) / 1000;
    }
    setStartTime(null); // Reset startTime to prevent miscalculations
  };

  // Resets the stopwatch to initial state
  const handleReset = () => {
    clearInterval(intervalRef.current); // Stop the interval
    leapTimeRef.current = 0; // Reset cumulative time
    setStartTime(null); // Clear start time
    setNow(null); // Clear current time
  };

  // Calculate total elapsed time (persistent + current session)
  let secondsPassed = leapTimeRef.current;
  if (startTime != null && now != null) {
    secondsPassed += (now - startTime) / 1000; // Add current session time
  }

  // Render the stopwatch UI
  return (
    <div className="App">
      <p>{secondsPassed.toFixed(2)}</p> {/* Display time with 2 decimal places */}
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default App;

How It Works:

1) State Management with useState:

startTime stores the timestamp when the stopwatch starts (set via setStartTime).
now updates every 10ms with the current timestamp (via setNow), triggering re-renders to display real-time elapsed time.
These reactive states ensure the UI reflects the timer’s current state.

2) Persistent Data with useRef:

intervalRef holds the ID of the setInterval timer, allowing us to clear it when stopping or resetting without affecting renders.
leapTimeRef tracks the cumulative elapsed time (in seconds) across multiple start/stop cycles, persisting without triggering re-renders.

3) Function Breakdown:

handleStart: Sets startTime and now to the current timestamp, clears any existing interval, and starts a new interval to update now every 10ms.
handleStop: Stops the interval, calculates the elapsed time since startTime, adds it to leapTimeRef.current, and resets startTime to prevent miscalculations.
handleReset: Clears the interval, resets leapTimeRef to 0, and clears startTime and now for a fresh start.

4) Displaying Time:

secondsPassed combines leapTimeRef.current (past time) with the current session’s time (now - startTime) if running.
Displayed with .toFixed(2) for two decimal places (e.g., 12.34 seconds).

Why This Combo Shines:

useState drives real-time UI updates for a responsive experience.
useRef ensures leapTimeRef and intervalRef persist efficiently, avoiding unnecessary re-renders.
Together, they create a smooth, accurate stopwatch.

💡 Pro Tip:
Use useState for UI-driving data and useRef for persistent, non-rendering data. This pattern is key for performant React apps!

Understanding the useReducer Hook in React

Manav Bajaj — Sun, 25 May 2025 16:02:55 +0000

In the world of React, managing state is a fundamental aspect of building dynamic and interactive applications. One of the most commonly used tools for this purpose is the useState hook, which allows us to manage a component's state in a simple and intuitive way.

The useState function returns an array with two elements: the current state value and a state setter function. When the setter function is called with a new value, React triggers a re-render, and the component updates to reflect the new state. Typically, we define event handlers that encapsulate our state update logic. These handlers call the setter function with the updated value, enabling our components to respond to user interactions or other changes in application data.

import React, { useState } from 'react'; 

const [count, setCount] = useState(0); 
// 'count' is the reactive state variable
// 'setCount' is the function used to update the state
// Calling 'setCount' triggers a re-render with the new state

function addCount(){
  let new_count = count+1;
  setCount(new_count)
}

// an event handler that encapsulates the state update logic
// further calls the state setter function with the updated value

As your application grows in size and complexity, your components will often require multiple state updates. This can lead to your components having event handlers with increasingly complex state management logic, making it harder for others (or even your future self) to quickly understand how the component's state is being modified.This is where the useReducer hook comes to the rescue,offering a more structured and scalable approach to state management.

The useReducer hook is inspired by the reducer pattern popularized by Redux, allowing you to manage state through a reducer function that specifies how the state should change in response to dispatched actions. This not only centralizes your state logic but also makes it easier to test and maintain.

In this article, we'll delve into the useReducer hook, exploring its syntax, usage, and benefits through practical examples. Whether you're a beginner looking to expand your React toolkit or an experienced developer seeking to optimize your state management strategies, this guide will provide valuable insights into leveraging useReducer effectively.

What is useReducer?
The useReducer hook is a built-in React hook that provides an alternative way to handle state in functional components. It is particularly useful when dealing with complex state logic that involves multiple sub-values as it extracts the state management logic out of the component.

The useReducer(reducer, initialState) hook accepts 2 arguments: the reducer function and the initial state. The hook then returns an array of 2 items: the current state and the dispatch function.

Basic Syntax
To use useReducer, you first need to import it from React:

import {useReducer} from 'react';

Then, you define your reducer function, which specifies how the state should change in response to the dispatched actions:

function reducer(state, action) {
  switch (action.type) {
    case 'actionType1':
      // return new state
    case 'actionType2':
      // return new state
    default:
      throw new Error('Unknown action type');
  }
}

Next, you call useReducer in your component, passing the reducer and the initial state:

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

Here, state holds the current state, and dispatch is a function that you can call with an action to update the state.

Simple Example: Counter
Let’s explore useReducer with a simple counter example to illustrate its mechanics.

import {useReducer} from 'react'

function App(){
  // const [count,setCount] = useState(0)
  const [count,dispatch] = useReducer(reducer,0)

  function addCount(){
    dispatch({type:'add'})
  }

  function subCount(){
    dispatch({type:'subtract'})
  }
  return(
    <div>
      {count}
      <button onClick={addCount}>+</button>
      <button onClick={subCount}>-</button>
    </div>
  )
}

function reducer(state,action){
  switch(action.type){
    case 'add': return state+1;
                break;
    case 'subtract': return state-1;
                     break;
  }
}

export default App;

How It Works

The reducer function handles two actions: add and subtract, updating the count state accordingly.
useReducer returns the state (e.g., { count: 0 }) and dispatch, which triggers state updates via actions.
Clicking the buttons dispatches actions, and the reducer computes the new state, which React uses to re-render the component.

This example mirrors how useState updates state but organizes the logic in a reducer, making it easier to extend for more complex scenarios.

How useReducer is Built on useState
The useReducer hook is fundamentally built on top of useState, leveraging its state management capabilities to provide a more structured approach to handling complex state logic. To understand this, consider a simplified implementation of useReducer:

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);
  const dispatch = (action) => {
    const updated_state = reducer(state, action);
    setState(updated_state);
  };
  return [state, dispatch];
}

The useReducer uses useState internally to store the state and trigger re-renders. The state variable holds the current state, just like in useState. The dispatch function calls the reducer with the current state and an action, computes the new state, and uses setState to update it, prompting React to re-render the component. The key difference is that useReducer introduces the reducer function, which encapsulates state transition logic, making it ideal for complex scenarios where multiple state updates need to be coordinated.

When to Use useReducer
While useState is suitable for simple state updates, useReducer is preferable in the following situations:

Complex State Logic: When your state has multiple sub-values that are interdependent or when the state transitions are complex.
Next State Depends on Previous State: When the next state relies on the previous state in a way that's not straightforward with useState.
Centralized State Logic: When you want to keep all state update logic in one place, making it easier to understand and maintain.

Conclusion
The useReducer hook is a powerful tool for managing complex state in React, built on the foundation of useState but offering a structured approach through reducers and actions. By centralizing state logic, it makes code predictable and maintainable, as seen in the to-do list example. With useReducer, you’re well-equipped to tackle complex state challenges in React!

JavaScript in the Browser: Understanding and Manipulating the Document Object Model (DOM)

Manav Bajaj — Fri, 16 May 2025 08:56:33 +0000

Javascript is one of the core technologies of the World Wide Web, alongside HTML and CSS.It's a high-level programming language used to add interactivity to web pages.Before JavaScript, webpages were static — they displayed content and provided hyperlinks which enabled the user to navigate through the Web, but offered little in terms of user interaction or dynamic behaviour.JavaScript changed this by enabling developers to create dynamic, responsive web experiences, allowing real-time content updates, interactive forms, and engaging user interfaces directly in the browser.

Each web browser has its own JavaScript engine that interprets and executes JavaScript code, converting it into machine language to run on the computer's hardware.This javascript engine plays a pivotal role in providing the Document Object Model (DOM) to developers.The DOM lies at the centre of the webpage interactivity as it allows JavaScript to manipulate a webpage’s structure and content dynamically.This article explores what the DOM is, how JavaScript interacts with it, and provides practical examples to get you started.

What is the DOM?
The DOM is a programming interface that represents a webpage’s structure as a tree of objects. When a browser loads an HTML document, it parses the code and creates a hierarchical model where each HTML element becomes a “node” in the tree. This tree-like structure allows JavaScript to access, modify, and interact with the webpage dynamically.

For example, consider this simple HTML:

<!DOCTYPE html>
<html>
  <body>
    <h1>My Page</h1>
    <p id="intro">Welcome!</p>
  </body>
</html>

The DOM represents this as a tree:

Where is the DOM Stored?
The DOM is an in-memory representation of a webpage, created by the browser’s engine when it loads an HTML document. It resides in the browser’s RAM as a tree of objects. These changes are temporary and exist only during the webpage’s session. The DOM is not a file or database but a live, in-memory structure managed by the browser, making it fast yet resource-intensive.

Is the DOM Part of JavaScript or the Browser?
The DOM is a browser-provided interface, not a part of the JavaScript language itself.The DOM is implemented by browsers to represent a webpage’s structure. JavaScript, as a programming language, interacts with the DOM through the document object provided by the browser’s runtime environment.The JS runtime environment inside a browser consists of a JS engine, Web APIs (DOM, AJAX, setTimeout etc.) and the event loop.

The below figure represents the javascript runtime environment in the browser:

A server-side runtime of javascript like NodeJS embeds the V8 engine of the google chrome browser with some C++ code and takes the JS compiling abilities out of a browser. This is why when you console the value of global document object in a node application it will throw you an error saying that document is not defined.This is because Node.js being a server-side runtime environment does not have a DOM.

console.log(document)

Output:

ReferenceError: document is not defined

Manipulating the DOM using Javascript
JavaScript uses the DOM to:

Access elements: Find specific nodes using methods like getElementById or querySelector.
Modify content: Change text, attributes, or styles of elements.
Create or remove elements: Add new nodes or delete existing ones.
Handle events: Respond to user actions like clicks or keypresses.

The document object is the entry point for DOM manipulation. It provides methods to select and modify elements, making it the cornerstone of browser-based JavaScript.

Key DOM Methods and Properties
Here are some essential tools for working with the DOM:

Selecting Elements:
- document.getElementById('id'): Finds an element by its ID.
- document.querySelector('selector'): Selects the first element matching a CSS selector.
- document.querySelectorAll('selector'): Returns a list of all matching elements.
Modifying Elements:
- element.innerHTML: Gets or sets the HTML content of an element.
- element.textContent: Gets or sets the text content (safer than innerHTML).
- element.style: Modifies inline CSS styles.
- element.setAttribute('name', 'value'): Sets an attribute (e.g., id, class).
Creating and Removing Elements:
- document.createElement('tag'): Creates a new element.
- parent.appendChild(child): Adds a child element to a parent.
- element.remove(): Removes an element from the DOM.
Event Handling:
- element.addEventListener('event', callback): Attaches an event listener (e.g., for clicks or inputs).

Practical Example: Building a Dynamic To-Do List
Let’s see the DOM in action by creating a simple to-do list where users can add tasks dynamically. Below is a complete example with HTML, CSS, and JavaScript, which runs in a browser (not Node.js, due to the DOM dependency).

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic To-Do List</title>
    <style>
      .container { max-width: 400px; margin: 20px auto; font-family: Arial; }
      ul { list-style: none; padding: 0; }
      li { padding: 10px; background: #f4f4f4; margin: 5px 0; }
      button { margin-left: 10px; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>My To-Do List</h1>
      <input type="text" id="taskInput" placeholder="Enter a task">
      <button onclick="addTask()">Add Task</button>
      <ul id="taskList"></ul>
    </div>
    <script>
      function addTask() {
        // Get input value
        const input = document.getElementById('taskInput');
        const taskText = input.value.trim();

        // Validate input
        if (taskText === '') {
          alert('Please enter a task!');
          return;
        }

        // Create new list item
        const li = document.createElement('li');
        li.textContent = taskText;

        // Create delete button
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.onclick = () => li.remove();

        // Append button to list item
        li.appendChild(deleteBtn);

        // Append list item to task list
        document.getElementById('taskList').appendChild(li);

        // Clear input
        input.value = '';
      }
    </script>
  </body>
</html>

How It Works

Selecting Elements: getElementById grabs the input and list elements.
Creating Elements: createElement makes a new li and button for each task.
Modifying the DOM: appendChild adds the list item to the ul, and textContent sets the task text.
Event Handling: The Add Task button triggers addTask(), and each delete button removes its parent li.

Debugging the DOM
Use browser developer tools (e.g., Chrome DevTools) to inspect the DOM, test selectors, and debug JavaScript. The Elements tab shows the live DOM tree, and the Console lets you run commands like document.querySelector('.container'). Use console.log to track values and try-catch blocks to handle errors gracefully.

Conclusion
The DOM, a browser-provided interface powered by a JavaScript engine, transforms static webpages into dynamic, interactive experiences. By understanding its role you can build features like to-do lists, dynamic forms, or even single-page applications in the browser. Start with simple selectors and event listeners, then explore advanced techniques like event delegation and performance optimization. With the DOM and JavaScript, the possibilities for web interactivity are endless.

JWT Explained

Manav Bajaj — Tue, 14 May 2024 11:36:39 +0000

If you are a web developer or a student studying web development you must have heard of the term JWT. These days, JSON Web Tokens (JWTs) play a pivotal role in web development, particularly in the authentication and authorization processes of web applications. In this article we will delve deep into the world of JWTs,their structure, how they work and the advantages they offer over traditional session tokens.

A JWT stands for JSON Web Token. JWTs are used for securely transferring information between parties as a JSON object. For those familiar with JavaScript, JSON is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications.

{
  "id" : "emp_007",
  "name" : "Gregor Samsa",
  "roles" : ["admin", "compliance"]
}

Structure of JWT
In its compact form, JSON Web Tokens consist of three strings separated by dots. It looks something like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

JWT consists of three parts:

Header: The header consists of two parts: the type of token which is JWT and the hashing algorithm which will be used in forming the signature.

{
 "alg":"HS256",
 "typ":"JWT"
}

This JSON is base64 encoded to form the first part of the JWT.

2.Payload: The payload consists of the claims which give information about the user. Claims consist of information such as user id, user name and the roles of user.Since a payload can easily be decoded it should not contain any sensitive information.

{
 "sub": "1234567890",
 "name": "Gregor Samsa",
 "admin": true,
 "iat": 1516239022
}

The payload is base64 encoded to form the second part of the JWT.

3.Signature: The signature is formed by taking together the encoded header, the encoded payload, a secret and then signing it with the hashing algorithm which is specified in the header.

HMACSHA256(
  base64UrlEncode(header) + '.' +
  base64UrlEncode(payload),
  secret)

The signature verifies that the sender of the JWT is who it says it is and that the message want changed in the way.

How JWT works?
So once a user logins the application using its credentials a JWT token is returned in the response. Like session tokens, JWT tokens can also be stored in the cookies of the browser.Now every subsequent request the user makes the JWT token will be sent along in the header of the request.Once the server receives the request it verifies the JWT using the signature. It uses the header and the payload received and the secret to generate a signature and if the generated signature matches the signature in the JWT it sends a successful response and gives the user access to the resources. If the generated signature doesn't match the signature in JWT the server sends back an error.

How is JWT different from session tokens?
In the case of session tokens, once the user logins the server creates a session and sends the session id in response.Now the session id is sent in every subsequent request.The server fetches the session corresponding to the session id and authorizes accordingly.
The major difference between JWT and session tokens is that JWT is stateless. Unlike session tokens nothing is stored on the server and the token is self-contained. This reduces the latency and the number of database calls. Also it makes the application more scalable. Since the token is self contained and nothing is stored on the server,the requests can be sent over to different servers by the load balancer without causing any issues.

Conclusion
I hope through this blog now you know a little more about JWTs.