Forem: Rishabh Joshi

Learn how to drastically improve your React app’s performance using lazy loading and `React.Suspense`. This guide covers route-level code splitting, loading fallbacks, best practices, and real-world benefits for Core Web Vitals.

Rishabh Joshi — Sat, 17 May 2025 10:48:42 +0000

Rishabh Joshi

May 17 '25

⚡ Boost React Performance with Lazy Loading + Suspense

#react #javascript #performance #webdev

Comments

4 min read

⚡ Boost React Performance with Lazy Loading + Suspense

Rishabh Joshi — Sat, 17 May 2025 10:47:31 +0000

⚙️ Why Optimize React Apps?

🧠 The Problem

In traditional React setups, all JavaScript code is bundled (using tools like Vite or Webpack) into a few files, often a single large main.js or bundle.js.

On initial page load, the browser must download, parse, and execute this entire bundle before the application becomes interactive.
Larger applications lead to larger bundles → slower Time-to-Interactive (TTI) and worse Largest Contentful Paint (LCP).
Impact: Slower apps cause user frustration, higher bounce rates, and potentially worse SEO.

🎯 The Goal

Significantly reduce the initial JavaScript payload.
Improve Time-to-Interactive (TTI), making the app usable faster.
Enhance perceived performance and overall user experience, particularly on mobile and slow network connections.
Reduce memory consumption on the client-side by not loading unnecessary code

📦 What is Lazy Loading?

Lazy loading is a strategy for code splitting, where you break down your application's JavaScript bundle into smaller, manageable chunks. These chunks are then loaded on-demand, typically when a user navigates to a specific route or interacts with a particular feature, rather than all at once during the initial load.

📉 Before Lazy Loading:

A monolithic bundle.js contains code for all components, pages, and libraries.
Initial load downloads everything, including code for pages or features the user might never visit or use.
Analogy: Ordering every dish on the menu when you first sit down at a restaurant, even if you only plan to eat an appetizer.

📈 After Lazy Loading:

The initial bundle (main.chunk.js) is much smaller, containing only the essential code for the initial view.
Additional components/pages/features are split into separate chunks (e.g., about.chunk.js, UserProfile.chunk.js).
These chunks are loaded dynamically via network requests when the corresponding component is needed.
This leads to smaller initial bundle sizes and significantly faster application startup.

🧠 How It Works in React

🛠️ `React.lazy()`

Introduced in React 16.6.
A function that lets you render a dynamically imported component as a regular component.
It takes a function that must call a dynamic import(). This import() call returns a Promise which resolves to a module with a default export containing the React component.
React.lazy() leverages the browser's native import() function, which dynamically loads modules and returns a Promise. This is key to enabling true asynchronous code loading in React apps.

// ./pages/Homepage.js
const Homepage = () => <div>Welcome to the Homepage!</div>;
export default Homepage;

// ./App.js
const Homepage = React.lazy(() => import('./pages/Homepage'));

💡 React.lazy currently only supports default exports.

⏳ What is Suspense?

React’s <Suspense> component is essential for lazy loading. It lets you specify a fallback UI (like a loading spinner) to display while the lazy-loaded component's code is being fetched over the network and prepared.

import React, { Suspense } from 'react';
const Spinner = () => <div>Loading...</div>; // Your loading indicator
const Homepage = React.lazy(() => import('./pages/Homepage'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<Spinner />}>
        <Homepage />
      </Suspense>
    </div>
  );
}

🔄 Use Cases

Lazy loading React components: The primary use case discussed here.
Data fetching: While not built-in for all data fetching, Suspense is designed to work with data fetching libraries that support it (e.g., Relay, or with custom hooks in React 18+ for server components and use hook). This allows showing fallbacks while data is loading, similar to components.
Coordinating loading states: Suspense can manage loading states for multiple asynchronous operations.
Data fetching: <Suspense> can show fallback UIs while data is loading — but this requires specific integrations. Before React 18, this was mainly supported via libraries like Relay. With React 18, new patterns (like the use() hook and Server Components) allow Suspense to manage data-fetching more directly in compatible frameworks like Next.js.

Lazy Loading + Suspense with React Router

Route-Level Code Splitting

This is the most common and impactful application of lazy loading. By splitting your code based on routes, users only download the code for the page they are currently viewing.

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import Spinner from './components/Spinner';

const Homepage = lazy(() => import('./pages/Homepage'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

Where to place `<Suspense>`?

High-level placement: Wrap your entire <Routes> block for a consistent fallback.
Granular placement: Use multiple <Suspense> components to show different loaders for different parts of the UI.

🧭 Final Takeaways

Lazy loading is a powerful technique for drastically improving initial load performance by reducing the amount of JavaScript downloaded upfront.
Suspense is its essential companion, ensuring a smooth user experience by providing fallbacks during asynchronous loading states.
Combining these with React Router for route-based code splitting is the most impactful optimization for many React applications.
Always include Error Boundaries to make your lazy loading robust.
Leverage bundler features and browser developer tools to implement, verify, and measure the benefits.
Implement these strategies in your production-ready apps to significantly improve real-world performance metrics and user satisfaction.

💬 Have questions or tips on Performance? Drop them in the comments below!

Likes, Comments and feedback are welcome!😅

Happy coding!⚛️

Master Routing in React with React Router — learn how client-side routing works, build nested and dynamic routes, and navigate programmatically using real-world examples and clear explanations.

Rishabh Joshi — Fri, 09 May 2025 10:04:35 +0000

Rishabh Joshi

May 9 '25

React Router Basics to Advanced (v6+)

#react #webdev #router #javascript

Comments 1

7 min read

React Router Basics to Advanced (v6+)

Rishabh Joshi — Fri, 09 May 2025 09:55:15 +0000

What is ROUTING?

Routing refers to the process of navigating between different pages or views in a single-page application (SPA) without reloading the entire page.

It keeps the UI in sync with the current browser URL.
Allows us to build Single Page Applications (SPA).

Why Routing in React?

React apps are SPAs, meaning there's only one HTML file (index.html), but multiple views (pages) that users can navigate to. Routing helps manage these views by matching the URL to the correct component.

It enables client-side navigation without full-page reloads, allowing users to move smoothly between URLs like /home, /about, or /contact, each displaying different components.

React doesn’t have built-in routing, so we use a library like React Router (react-router-dom) for handling routing.

What is a Single Page Application (SPA)?

A Single Page Application (SPA) dynamically updates the page without reloading it, providing a seamless user experience.

Runs entirely in the browser (Client Side).
Different URLs load different React components.
Uses JavaScript (React) to update the UI dynamically.
Fetches additional data via APIs (e.g., from a backend server).

When the user clicks a link, the URL updates, and React dynamically loads the corresponding component.

React Router

React Router is the most popular library to handle navigation inside a React app.

Enables URL-based navigation.
Changes browser URLs without refreshing the page.
Keeps the UI in sync with the URL.

🔧 Installation

npm install react-router-dom

Defining Routes

With routing, we match different URLs to different UI views. In the case of React, we match a URL to a specific React Component, and we call each of these matches routes.

Since React Router v6.4, there are two main ways to define routes. We'll focus on the traditional declarative way.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>       {/* 🚀 Enables routing */}
      <Routes>            {/* 🚦 Manages route paths */}
        <Route index element={<Home />} />  {/* Default route */}
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>         {/* Link to Home */}
      <Link to="/about">About</Link>   {/* Link to About */}
    </nav>
  );
}

Key Concepts 🔑

<BrowserRouter> – The Router Provider
- It's the top-level component that enables routing in your React application.
- It leverages the HTML5 History API to keep your UI synchronized with the browser URL.
- Crucially, without <BrowserRouter>, React Router won't be able to manage your application's routes.
<Routes> – Routing Container
- This component acts as a container for your individual <Route> definitions.
- It intelligently iterates through its <Route> children and renders the first one whose path matches the current browser URL.
- Think of <Routes> as a central highway dispatcher, directing traffic to the appropriate exits.
- It's the successor to the older <Switch> component in previous versions of React Router.
<Route> – Define a Path and Component
- Each <Route> component serves as a mapping between a specific URL path and a corresponding React component.
- When the browser URL matches the path of a <Route>, that route's element (the React component) is rendered.
- index prop defines the default child route (instead of path="/").
- Page Not Found Handling:
```
  <Route index element={<Home />} />
  <Route path="*" element={<PageNotFound />} />
```
The path="*" acts as a catch-all. If no other defined route matches the current URL, this route will be matched, and the <PageNotFound> component will be displayed.
<NavLink> / <Link> – Navigation Without Reload
- These components are your primary tools for navigating between different routes within your SPA without triggering a full page reload from the server.
- They render as standard <a> tags in the HTML but intercept the click event to perform client-side navigation managed by React Router.
- <NavLink> vs. <Link>:
  - <NavLink> is a specialized version of <Link> that provides built-in styling capabilities for the currently active route.
  - It automatically applies an active class (by default) to the rendered link when its to prop matches the current URL.
  - You can customize this behavior using the className or style props, or by using the isActive prop for more fine-grained control.
```
import { NavLink } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </nav>
  );
}
```
Nested Routes
- As your application grows, you might encounter scenarios where certain sections have their own sub-navigation and views. This is where nested routes come in handy.
- Imagine a /dashboard section with sub-pages like /dashboard/profile and /dashboard/settings.
- To implement this, you define child <Route> components within a parent <Route>.
- The key to rendering the content of these nested routes is the <Outlet /> component in the parent route's component.
```
<Routes>
    <Route path="/dashboard" element={<Dashboard />}>
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
    </Route>
</Routes>
```
<Outlet> in React Router
- The <Outlet> component serves as a placeholder in the component rendered by a parent route.
- When a child route of that parent route matches the current URL, its corresponding component is rendered inside the <Outlet> within the parent.
- Why is <Outlet> essential?
  - It enables you to create reusable layouts. Common UI elements like navigation bars, sidebars, and footers can be defined in the parent component, while the specific content for the child routes is dynamically injected into the <Outlet>.
  - This promotes a clean and organized component structure.
```
import { Outlet, Link } from "react-router-dom";

const Dashboard = () => {
  return (
    <div>
      <nav>
        <Link to="/profile">Profile</Link>
        <Link to="/settings">Settings</Link>
      </nav>

      <hr />
      <Outlet />     {/* Child route components will be rendered here */}
    </div>
  );
};

export default Dashboard;
```

Dynamic Routes with URL Parameters

Dynamic routes allow you to create routes that can handle variable parts of the URL. This is useful for displaying details of a specific item, like a product or a user profile.

import { useParams } from 'react-router-dom';

function ProductDetails() {
  const { productId } = useParams();
  return <div>Product ID: {productId}</div>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/products/:productId" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

useParams() hook: This React Router hook allows you to access the dynamic parameters from the current URL. You can call this hook within the functional component rendered by the dynamic route (in this case, ProductDetails). It returns an object where the keys are the parameter names defined in the path (e.g., productId) and the values are the corresponding segments from the URL.
/:productId: This syntax within the path prop of the <Route> defines a dynamic segment. Any value in this position of the URL will be captured as the productId parameter. For example, if the URL is /products/42, the useParams() hook in ProductDetails will return { productId: "42" }.

Programmatic Navigation

`useNavigate` Hook

The useNavigate hook allows you to programmatically navigate to different routes. This is often used after actions like form submissions or for handling authentication redirects.

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/about');
  };
  return <button onClick={handleClick}>Go to About</button>;
}

`<Navigate />` Component

The <Navigate /> component is used to redirect the user to a different route, often based on certain conditions like user authentication

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isLoggedIn, children }) {
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

replace prop: Replaces the current entry in the history stack.
This is useful for auth checks and redirection.

How Routing Changes Component Structure in React

Without Router (Traditional Component Structure) Normally, in a simple React app (without a router), we structure components inside the App component like this:

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

Here, App acts like a parent container that holds all components, and all of them are typically rendered together.

When React Router Comes Into Play When we introduce React Router, the way we structure App changes. Instead of keeping all components directly inside App, we primarily keep the <BrowserRouter>, <Routes>, and <Route> configurations there. The actual page content is rendered by the components matched by the routes.

Why?

Routing Controls What to Show
- Before Router: App always renders everything.
- With Router: Different pages (routes) should load only when needed.
Why is this better? 📌
- Improved Performance: Only the required components for the current route are loaded and rendered, reducing the initial load time and improving overall performance.
- Smoother User Experience: Navigation between different views happens without full page reloads, providing a more seamless and faster user experience.

Understanding React Router with a Highway Analogy

React Router Concept	Real-World Analogy
`BrowserRouter`	🛣️ The road network that enables travel. Without it, there are no roads.
`Routes`	🚗 The highway with multiple exits (routes).
`Route`	🛑 A specific exit that leads to a destination (component).
`Link`	🚦 Signboards that direct users to different routes.
`<Outlet />`	🛣️ The location on the highway where nested exits merge.

Without BrowserRouter, there are no roads!
Without Routes, there are no exits!
Without Route, you can’t reach your destination!
Without Outlet, nested routes have nowhere to render.

✨ Final Thoughts

Routing is the backbone of navigation in modern React applications. It allows us to create multi-page experiences without full page reloads, making our apps feel faster, more dynamic, and more like native applications.

With React Router, we can:

Map URLs to components easily.
Enable smooth client-side navigation.
Organize large applications into clean, scalable route structures.
Enhance user experience with dynamic routing, nested layouts, protected routes, and programmatic navigation.

As you build more advanced React apps, mastering routing will unlock a whole new level of power and flexibility in your projects.

In short, React Router bridges the gap between a simple app and a fully functional web experience. 🚀

📚 What's Next?

This post focused on the traditional declarative routing using React Router 6.
However, to keep things clean and digestible, I’ll cover some advanced topics separately in the next post:

Using Suspense with React Router (for lazy loading routes) ⚡
New Features and Changes in React Router v7🆕

Stay tuned for a deep dive into modern routing patterns and performance optimization techniques coming soon!

Exploring React's useReducer hook, an alternative to useState that’s perfect for managing complex state logic in your components.

Rishabh Joshi — Sat, 12 Apr 2025 14:12:29 +0000

Rishabh Joshi

Apr 12 '25

🧠Understanding useReducer in React

Comments

4 min read

🧠Understanding useReducer in React

Rishabh Joshi — Sat, 12 Apr 2025 14:11:22 +0000

useReducer is a React Hook that provides an alternative to useState for managing complex state logic. It's particularly useful when state transitions depend on the previous state or involve multiple sub-states.

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

reducer: A function that takes the current state and an action, then returns the new state. Based on the action.type, it returns the new state.
initialState: The initial value of the state.
state: holds the current state value
dispatch: A function used to send actions to the reducer.

const initialState = {count : 0};

function reducer(state, action) {
   switch (action.type) {
      case "increment":
         // Return a NEW object with the updated property
         return { ...state, count: state.count + action.payload };
      case "decrement":
         return { ...state, count: state.count - action.payload };

      // ❌ ❌ BAD: Returns a number, not the state object shape! AVOID
      // case "increment":
      //   return state.count + action.payload;

      default:
         throw new Error("Unknown action type");
   }
}

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

   const incrementCount = function(){
   //sends an action to the reducer, updating the state accordingly.
      dispatch({ type: "increment", payload: 1 }) 
   }
   const decrementCount = function(){
   //sends an action to the reducer, updating the state accordingly
      dispatch({ type: "decrement", payload: 1 })
   }

   return (
      <button onClick={incrementCount}>+</button>
      <span>Count: {state.count}</span>
      <button onClick={decrementCount}>-</button>
   )
}

📌The reducer must be pure function and return a completely new state object.

How useReducer Works: The Flow

Here’s the step-by-step process detailing how the components of useReducer interact:

Initial Setup: When your component first renders, useReducer is called with your Reducer Function and the initialState. It returns the current State Object (which is the initialState at first) and the Dispatch Function.
Event Trigger: Something happens in your application that requires a state change (e.g., a user clicks a button, types in a field, data arrives).
Dispatching an Action: The event handler for that event calls the Dispatch Function. You pass an Action Object to dispatch. This Action Object contains information about what change needs to happen (the type) and any data needed for that change (the payload).
- Example: dispatch({ type: 'INCREMENT', payload: 1 })
Reducer Called: React takes the Action Object you dispatched and calls your Reducer Function. It provides two arguments to your reducer:
- The current State Object.
- The Action Object you just dispatched.
- Example: reducer(currentState, { type: 'INCREMENT', payload: 1 })
Calculating the New State: Inside your Reducer Function, you use the action.type (and action.payload if necessary) to determine how to compute the next state based on the current state. This is typically done using a switch statement or if/else conditions based on action.type. Crucially, the reducer must be pure and return a completely new state object (immutability), not modify the existing one.
- Example: Based on { type: 'INCREMENT', payload: 1 }, the reducer might return { ...currentState, count: currentState.count + 1 }.
State Update: useReducer receives the new state object returned by your Reducer Function. It then updates the internal state associated with your component.
Re-render: React detects that the state managed by useReducer has changed. It schedules your component (and potentially its children) to re-render. When the component re-renders, the useReducer hook will now return the updated State Object from step 6. Your UI then displays the information based on this new state.

So, useReducer provides a structured cycle: an action is dispatched describing an intended change -> the reducer function calculates the new state based on the current state and the action -> React updates the state -> the component re-renders with the new state. The dispatch function is the trigger that kicks off this cycle.

When to use `useReducer`❓

When state transitions are more complex (if-else chains or multiple related state updates).
When you need centralized state management.
You have multiple related state variables.
State updates are interdependent.
When the next state depends on the previous state.
You want to keep your components cleaner and more readable.

Why use `useReducer`❓

While useState is sufficient for managing simple state, it can become cumbersome when:

The component has multiple state variables.
State updates are scattered across multiple event handlers.
Multiple state updates need to occur simultaneously in response to an event.
State updates depend on other state variables. In these cases, useReducer helps organize state updates in a more structured manner.

🧭 When to Use What?

Use Case	Recommended Approach
Simple local state (e.g. form inputs, toggles)	`useState`
Complex local state (e.g. nested updates, dependencies)	`useReducer`
Shared global state in a small to medium app	`useReducer` + Context API
Global state in a large, complex application	Redux

✅ Conclusion

The useReducer hook is a robust alternative to useState, particularly well-suited for managing complex state logic and scenarios where the next state depends on the previous one. By centralizing state transitions within a pure reducer function, useReducer promotes cleaner, more maintainable code and improves the predictability of state changes.

It's an excellent choice when:

You have multiple related pieces of state.
State updates are interdependent or complex.
You want to separate state logic from UI logic for better readability.

Understanding useReducer not only helps structure state management more effectively within components, but also lays a strong foundation for working with more advanced tools like Redux.

Likes, Comments and feedback are welcome!😅

Happy coding!

🚀 Just published a deep dive on useRef in React! Understand how it works, when to use it, and common use cases — with analogies & clean examples.

Rishabh Joshi — Sun, 06 Apr 2025 07:18:27 +0000

Rishabh Joshi

Apr 6 '25

🧠Understanding useRef in React

#react #javascript #webdev #frontend

Comments 1

6 min read

🧠Understanding useRef in React

Rishabh Joshi — Sun, 06 Apr 2025 07:16:23 +0000

useRef is a React Hook that allows you to create a mutable reference object. This reference object can hold a value that persists across renders and changing its .current value does NOT trigger a re-render. It's also commonly used to get direct access to DOM elements.

What is useRef?

useRef is a React hook returning a mutable ref object with a single .current property.

const myRef = useRef(initialValue);
// myRef looks like: { current: initialValue }

Initialization: The initialValue you provide is used to set myRef.current only during the component's initial render. It's ignored on subsequent renders. If you omit the argument, initialValue defaults to undefined.
Return Value: useRef returns the same ref object on every render of a given component instance. This is how it persists across renders.

🗝️Key Characteristics:

Mutable .current Property:
You directly modify the ref.current property (e.g., myRef.current = newValue), unlike state variables from useState (which you update via a setter function),
No Re-render on Change:
Assigning a new value to ref.current does not trigger a component re-render. This is the most significant difference from useState.
Persistence Across Renders:
The ref object itself (and the value stored in ref.current) persists for the full lifetime of the component. React ensures you get the same ref object back on every render.

⚠️When Should You Mutate `ref.current`?

Since mutating ref.current doesn't cause a re-render, it's important when you perform the mutation.

✅Safe: Inside event handlers (like onClick, onChange) or inside useEffect hooks. These run after the render cycle is complete or as a result of user interaction, making mutations predictable.
❌Avoid (Generally): Mutating ref.current directly during the rendering phase (i.e., right inside the main body of your functional component). While React won't stop you, reading a ref during render is fine, but writing to it can make component behavior less predictable. This is because the component body should ideally be free of side effects, and mutations might not behave consistently depending on React's rendering optimizations (like Concurrent Mode). If you need to calculate something based on render and store it mutably, useEffect is usually the better place.

🔧Common Use Cases

useRef serves two primary purposes in React components:

1. Accessing DOM Nodes

This is a very common use case. useRef allows you to get a direct reference to a specific DOM element rendered by your component.

How it works:
- Create a ref, usually initialized to null: const myInputRef = useRef(null);
- Attach this ref to a JSX element using the special ref prop: <input ref={myInputRef} />.
- After the component mounts and React creates the DOM node for the <input>, React will set myInputRef.current to that DOM node instance.
Why it's needed:
For interacting directly with the DOM, which is sometimes necessary for:
- Managing focus (e.g.- myInputRef.current.focus()).
- Measuring element dimensions or position.
- Triggering imperative animations.
- Integrating with third-party libraries that need direct DOM access.

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  // 1. Create a ref to hold the input DOM element
  const inputEl = useRef(null);

  // Example: Focus on initial mount 
  useEffect(() => {
    inputEl.current?.focus();     
  }, []);                 
  // Empty dependency array means run once after initial mount

  return (
    <>
      {/* 2. Attach the ref to the input element */}
      <input ref={inputEl} type="text" />
    </>
  );
}

2. Storing Mutable Values (Like Instance Variables)

You can use useRef to keep track of any mutable value that needs to persist across renders but should not cause a re-render when it changes.

Storing previous state or prop values.
Managing timer IDs (e.g., from setTimeout or setInterval).
Keeping track of internal component state that doesn't directly affect the rendered output.
How it works:
- Initialization: You call useRef(initialValue) during your component's setup. React creates a plain JavaScript object like { current: initialValue }.
- Persistence: React internally holds onto this specific object for the entire lifetime of your component instance. On every subsequent render, the exact same object is returned by the useRef hook.
- Accessing: You can read the stored value anytime using yourRef.current.
- Updating: You can change the stored value by directly assigning a new value to the .current property (e.g., yourRef.current = newValue).

⚠️No Re-render: this assignment to .current is just a standard JavaScript object property mutation. React does not monitor this change, and therefore, it does not trigger a component re-render. The value is updated silently within the persistent ref object.

The Analogy: The Room, The Closet, and The Label Maker

Imagine your React component is like a room. Every time the component "re-renders" (because its state or props change), it's like the room gets quickly dismantled and rebuilt with the updated information.

useState: Think of useState as the visible furniture or decorations in the room (like a couch or a painting). When you change something using the set function (e.g., changing the couch color), React notices this visible change and rebuilds the room (re-renders the component) to show the update. Everyone sees the new couch color.
useRef: Now, useRef gives you access to persistent tools that don't cause a room rebuild when used or changed. It primarily provides two kinds of tools:

The Hidden Storage Closet (for Mutable Values):

Calling useRef(initialValue) can create a small, hidden storage closet inside the room, with an initial item placed on its single shelf, labelled .current.
This closet (ref object) and its contents persist across room rebuilds (re-renders). Even when the room is dismantled and rebuilt, the closet remains exactly where it is, untouched.
You can open the closet anytime (preferably in effects or handlers) and change the item on the .current shelf (myRef.current = newValue).
Crucially: Changing the item inside the hidden closet does not cause the room to be rebuilt (it does not trigger a re-render). It's a silent change, hidden from the main rendering process.

The Persistent Label Maker (for DOM Access):

Calling useRef(null) can also give you a persistent label maker.
When you build the room, you can use the special ref prop on a specific part of the room's structure (like a window, a door, or a light switch – representing a DOM element like <input ref={myRef} />). This tells React: "Use the myRef label maker to put a unique, persistent label on this specific window when you build it."
After the room is built (the component mounts and renders the element), the label maker's display (myRef.current) now points directly to that specific, labeled window (the actual DOM node).
You can then use this reference (myRef.current) to interact directly with that specific part of the room (e.g., myRef.current.focus() to look through the window, or myRef.current.style.display = 'none' to cover it) without needing to rebuild the entire room (no re-render is triggered by accessing or manipulating the element via the ref).

In essence, useRef provides ways to either hold onto information silently (closet) or get a direct, persistent handle (label maker) to parts of the rendered output, all without interfering with React's normal state-driven rendering cycle.

🔄 `useState` vs `useRef` – Quick Comparison

Feature	`useState`	`useRef`
Triggers re-render on change?	✅ Yes	❌ No
Persists across renders?	✅ Yes	✅ Yes
Used for DOM access?	❌ No	✅ Yes
Ideal for	UI-related state that affects rendering	Mutable values or DOM refs that don’t affect UI
How to update value	Using setter function (e.g., `setValue()`)	Direct mutation (`myRef.current = newValue`)
Can be used in render phase?	✅ Yes (safe)	⚠️ Reading: Yes / Writing: Avoid in render phase

Wrapping Up

useRef is a powerful tool in your React toolkit, essential for interacting with the DOM and managing persistent mutable values that shouldn't trigger re-renders. Understanding when and why to use it over useState is key to writing efficient and effective React components.

when and why to use `useRef`:

You need direct access to a DOM element for imperative actions like focusing, measuring, or integrating with external libraries. useState cannot do this.
You need to store mutable data that persists across renders, but changing this data should NOT cause a re-render. This is useful for performance or specific logic needs.
Think: Timer IDs (setTimeout/setInterval), tracking previous state/props, flags not directly rendered.

In short: useState is for state that drives your UI updates. useRef is for references to DOM nodes or for holding mutable data silently behind the scenes.

Likes, Comments and feedback are welcome!😅

Happy coding!

Master side effects, dependencies, and cleanup like a pro! 🚀 Learn how to fetch data, manage event listeners, and avoid common mistakes. #React #WebDev #JavaScript #reacthooks

Rishabh Joshi — Sun, 30 Mar 2025 03:18:43 +0000

Rishabh Joshi

Mar 30 '25

🧠 Understanding useEffect in React

#webdev #react #javascript #programming

Comments 5

3 min read

🧠 Understanding useEffect in React

Rishabh Joshi — Sun, 30 Mar 2025 03:14:01 +0000

Why useEffect Exists

React's rendering must be pure—meaning it shouldn't modify the DOM, fetch data, or perform side effects during render. Instead, useEffect lets us handle side effects after the component has been painted.

What are Side Effects?

Side effects are operations that interact with outside elements (API calls, event listeners, timers, etc.). Without useEffect, we'd struggle to perform these tasks in function components.

Core Idea

useEffect runs after the render is committed to the DOM.
It helps manage side effects in React.
We can control when the effect runs using dependencies.

1️⃣ Basic Syntax of useEffect

useEffect(() => {
  // Side effect logic (e.g., API call, event listener)

  return () => {
    // Cleanup function (optional)
  };
}, [dependencies]); // Dependency array

Breakdown

✅ First argument → Function containing the effect.
✅ Second argument → Dependency array (controls when it runs).
✅ Return function → Cleanup function (runs before next effect execution or unmounting).

2️⃣ Different Ways to Use useEffect

1️⃣ No Dependency Array (Runs on Every Render)

useEffect(() => {
  console.log("Runs after every render");
});

Re-runs after every render (not recommended in most cases).
Can cause infinite loops if it modifies state inside.

2️⃣ Empty Dependency Array (Runs Only Once)

useEffect(() => {
  console.log("Runs only on mount!");
}, []); // Empty dependency array

Runs only once when the component mounts.
Similar to componentDidMount in class components.
Best for fetching data or setting up subscriptions.

3️⃣ Dependency Array (Runs on State or Prop Changes)

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

useEffect(() => {
  console.log(`Count changed: ${count}`);
}, [count]); // Runs whenever `count` changes

The effect re-runs whenever any dependency in the array changes.
Essential for reactive behaviors based on state/props.

4️⃣ Cleanup Function (For Unmounting & Re-running Effects)

useEffect(() => {
    const controller = new AbortController();

    fetch("https://url", { signal: controller.signal })
      .then((res) => res.json())

    return () => controller.abort(); // Cleanup: Abort fetch on unmount
  }, []);

3️⃣ Cleanup Matters

Cleanup function runs:

Before running the effect again (if dependencies change).
- Whenever the dependencies in the dependency array change, React first cleans up the previous effect before running the new one.
When the component unmounts (to prevent memory leaks).
- If an effect sets up an event listener or subscribes to a service, it should clean up when the component unmounts, or it could cause memory leaks.

If an effect isn't cleaned up properly, React may:
❌ Leak memory (e.g., event listeners that are never removed).
❌ Cause race conditions (outdated API requests could still resolve, updating unmounted components and causing errors.).
❌ Trigger unexpected behavior when dependencies change.

4️⃣ ⚠️ Common Mistakes & Gotchas

❌ Async Functions Directly in useEffect
React expects useEffect to return either:

Nothing (undefined)
A cleanup function

But if you use async directly, it always returns a Promise → React doesn’t expect that.

// ❌ Incorrect way
useEffect(async () => {
  const data = await fetchData();
}, []);

🚨 This will cause a warning:

"Effect callbacks are synchronous to prevent race conditions. Put the async function inside the effect."

✅ Proper Way
Wrap the async function inside useEffect:

useEffect(() => {
  const fetchData = async () => {
    const data = await fetch(...);
    setData(data);
  };

  fetchData();
}, []);

5️⃣ Rules of useEffect (and all Hooks) 📌

Always call hooks at the top level of your component.
Do NOT call hooks inside loops, conditions, or nested functions.
Every variable used inside useEffect must be in the dependency array (or use useRef to persist values without re-running effects).
Effects should be as specific as possible (avoid unnecessary re-renders).

🔥 Final Takeaway

🚀 useEffect is one of the most powerful hooks in React.
📌 It helps manage side effects (API calls, subscriptions, DOM interactions).
⚡ Control when it runs using the dependency array.
🧹 Always clean up effects to avoid memory leaks.

💬 Have questions or tips on using useEffect? Drop them in the comments below! 👇

React is all about building dynamic UIs and to do that, we need state. This post is a simplified and structured guide created from my personal notes, designed to help beginners understand how useState works and when to use it.

Rishabh Joshi — Thu, 20 Mar 2025 09:20:22 +0000

🧠 Understanding useState in React

Rishabh Joshi ・ Mar 20 '25

#webdev #react #javascript #reactjsdevelopment

🧠 Understanding useState in React

Rishabh Joshi — Thu, 20 Mar 2025 09:17:52 +0000

React is all about building dynamic UIs — and to do that, we need state. One of the most fundamental hooks in React is useState.

This post is a simplified and structured guide created from my personal notes, designed to help beginners understand how useState works, when to use it, and follow best practices.

🚀 What is `useState`?

useState is a Hook in React that lets you add state to functional components. It allows your component to remember values between renders and update the UI when that value changes.

const [state, setState] = useState(initialValue);

state → The current state value
setState → A function to update the state
initialValue → The initial value of the state (can be a primitive, object, array, or function)

🛠 Basic Example

import { useState } from "react";

export default function App() {
  const [step, setStep] = useState(1);
  {/*here step stores the default value i.e. 1 and 2nd parameter
  is the function which will help us updating the value of state.*/}

  function handlePrevious() {
    setStep(step + 1);
    {/* NEVER update state based on current state like this
    (use callback function)*/}
  }

  return (
    <div className="buttons">
      <p className="message">Step {step}</p>
      <button onClick={handlePrevious}>Previous</button>
    </div>
  );
}

📝 Note

useState is a hook — and hooks must be used at the top level of your component.

Never update state directly — always use the setter function

React REACTS to state changes by re-rendering the UI

🔍 The Mechanics of State

Whenever the state updates, React re-renders the component.
State is preserved between re-renders — unless the component unmounts (i.e. disappears from UI).
React calls the function of your component again during re-render, but the state remains intact.

⚡ Tips for Using State Effectively

✅ Make sure to update state only when needed, to avoid performance issues.
✅ Use callback functions when your new state depends on the current one.
❌ Avoid using state to store values that can be calculated from props.
✅ Use state to store data specific to the component.
❌ Never mutate the state directly.

❌ Don’t update based on current state like this:

setStep(step - 1);

✅ Use callback function when state depends on current value:

setStep((curStep) => curStep - 1);

If updating state doesn’t depend on the current state, you can use the direct method.

🧩 State Management in React

State management is about deciding:
- What state is needed?
- Where it should live?
- How data flows through the app?
Local State:
- Needed in one or a few components.
- Passed via props if needed by child components.
Global State:
- Shared across many components.
- Use tools like Context API or Redux.

⬆️ Lifting the State Up
If sibling components need the same piece of state, lift it to the nearest common parent.

📐 Derived State
Derived state is calculated based on another piece of state or prop — and recalculated during every render.

🎮 Controlled Elements in React

By default, input fields manage their own state in the DOM. In React, we like to centralize state inside our app. This is done using controlled elements.

Steps to implement:

Create state for the input.
Set input's value to that state.
Use onChange to update the state.

function Form() {
  const [description, setDescription] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Item.."
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
   {/* setting the value of item as state and then 
   updating the value of state by using setter function */}
    </form>
  );
}

🔚 Conclusion

**useState** is your first and most important hook in React. Understanding how it works, when to use callbacks, and how to structure state effectively will set you up for success in building dynamic, interactive UIs.

Happy coding! 💻✨

🙌 Let’s Connect

I’d love to hear your thoughts, questions, or feedback.
You can reach me on GitHub or leave a comment below.

Forem: Rishabh Joshi

Learn how to drastically improve your React app’s performance using lazy loading and `React.Suspense`. This guide covers route-level code splitting, loading fallbacks, best practices, and real-world benefits for Core Web Vitals.

⚡ Boost React Performance with Lazy Loading + Suspense

⚡ Boost React Performance with Lazy Loading + Suspense

⚙️ Why Optimize React Apps?

🧠 The Problem

🎯 The Goal

📦 What is Lazy Loading?

📉 Before Lazy Loading:

📈 After Lazy Loading:

🧠 How It Works in React

🛠️ React.lazy()

⏳ What is Suspense?

🔄 Use Cases

Lazy Loading + Suspense with React Router

Route-Level Code Splitting

Where to place <Suspense>?

🧭 Final Takeaways

Master Routing in React with React Router — learn how client-side routing works, build nested and dynamic routes, and navigate programmatically using real-world examples and clear explanations.

React Router Basics to Advanced (v6+)

React Router Basics to Advanced (v6+)

What is ROUTING?

Why Routing in React?

What is a Single Page Application (SPA)?

React Router

🔧 Installation

Defining Routes

Key Concepts 🔑

Dynamic Routes with URL Parameters

Programmatic Navigation

useNavigate Hook

<Navigate /> Component

How Routing Changes Component Structure in React

Understanding React Router with a Highway Analogy

✨ Final Thoughts

📚 What's Next?

Exploring React's useReducer hook, an alternative to useState that’s perfect for managing complex state logic in your components.

🧠Understanding useReducer in React

🧠Understanding useReducer in React

How useReducer Works: The Flow

When to use useReducer❓

Why use useReducer❓

🧭 When to Use What?

✅ Conclusion

🚀 Just published a deep dive on useRef in React! Understand how it works, when to use it, and common use cases — with analogies & clean examples.

🧠Understanding useRef in React

🧠Understanding useRef in React

What is useRef?

🗝️Key Characteristics:

⚠️When Should You Mutate ref.current?

🔧Common Use Cases

1. Accessing DOM Nodes

2. Storing Mutable Values (Like Instance Variables)

The Analogy: The Room, The Closet, and The Label Maker

The Hidden Storage Closet (for Mutable Values):

The Persistent Label Maker (for DOM Access):

🔄 useState vs useRef – Quick Comparison

Wrapping Up

when and why to use useRef:

Master side effects, dependencies, and cleanup like a pro! 🚀 Learn how to fetch data, manage event listeners, and avoid common mistakes. #React #WebDev #JavaScript #reacthooks

🧠 Understanding useEffect in React

🧠 Understanding useEffect in React

Why useEffect Exists

What are Side Effects?

Core Idea

1️⃣ Basic Syntax of useEffect

Breakdown

2️⃣ Different Ways to Use useEffect

1️⃣ No Dependency Array (Runs on Every Render)

2️⃣ Empty Dependency Array (Runs Only Once)

3️⃣ Dependency Array (Runs on State or Prop Changes)

4️⃣ Cleanup Function (For Unmounting & Re-running Effects)

3️⃣ Cleanup Matters

Cleanup function runs:

4️⃣ ⚠️ Common Mistakes & Gotchas

5️⃣ Rules of useEffect (and all Hooks) 📌

🔥 Final Takeaway

React is all about building dynamic UIs and to do that, we need state. This post is a simplified and structured guide created from my personal notes, designed to help beginners understand how useState works and when to use it.

🧠 Understanding useState in React

Rishabh Joshi ・ Mar 20 '25

🛠️ `React.lazy()`

Where to place `<Suspense>`?

`useNavigate` Hook

`<Navigate />` Component

When to use `useReducer`❓

Why use `useReducer`❓

⚠️When Should You Mutate `ref.current`?

🔄 `useState` vs `useRef` – Quick Comparison

when and why to use `useRef`:

🚀 What is `useState`?

`React REACTS to state changes by re-rendering the UI`