DEV Community: Vivek Mengu

New React 19 Hooks (With Examples)

Vivek Mengu — Thu, 11 Dec 2025 08:51:07 +0000

React 19 introduces several new hooks, which offer more refined control over asynchronous operations, form management, and optimistic UI updates. These hooks simplify common use cases in React apps by reducing boilerplate code and enhancing performance. Here are some of the key additions:

1. use()

The use() hook is a new way to handle asynchronous data in components, simplifying the consumption of promises. It works well with Suspense, allowing you to wait for a promise to resolve before rendering a component.

Use Case: Fetching data and showing it directly in the component without additional async handling.

Example: Fetching User Profile Data

import React, { use } from 'react';

async function fetchUserProfile(userId) {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
}

function UserProfile({ userId }) {
    const user = use(fetchUserProfile(userId)); // Directly use the async function

    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.bio}</p>
        </div>
    );
}

export default function App() {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <UserProfile userId="123" />
        </React.Suspense>
    );
}

In this example, use() enables you to retrieve user data directly in the component, without additional async/await or .then() calls. Wrapping UserProfile in Suspense allows the component to show a loading state until data fetching is complete.

2. useOptimistic()

useOptimistic helps manage optimistic updates, where the UI updates immediately based on an expected change, while backend confirmation happens in the background. This can significantly enhance user experience by making interactions feel more responsive.

Use Case: Implementing a “Like” button where the UI reflects the like instantly, even if the server update is still pending.

Example: Optimistic “Like” Button

import React, { useOptimistic } from 'react';

function LikeButton({ postId }) {
    const [isLiked, setIsLiked] = useOptimistic(false);

    const handleLike = async () => {
        setIsLiked(true);  // Optimistic update
        await api.likePost(postId); // Simulated server call
    };

    return (
        <button onClick={handleLike}>
            {isLiked ? 'Liked' : 'Like'}
        </button>
    );
}

In this example, setIsLiked(true) updates the button’s state immediately. The server call (api.likePost) then processes in the background. This approach allows the user to see instant feedback, with useOptimistic managing the optimistic state.

3. useFormStatus()

useFormStatus provides a way to monitor the status of form submission or validation, making it easier to display loading indicators, disable the submit button during submission, or show validation messages.

Use Case: Displaying a loading message and disabling the submit button while a form is being submitted.

Example: Form Submission with Loading Indicator

import React, { useFormStatus } from 'react';

function MyForm() {
    const { isSubmitting, isValid } = useFormStatus();

    return (
        <form action="/submit" method="post">
            <label>
                Name:
                <input type="text" name="name" required />
            </label>
            <button type="submit" disabled={isSubmitting || !isValid}>
                {isSubmitting ? 'Submitting...' : 'Submit'}
            </button>
        </form>
    );
}

In this example, useFormStatus tracks if the form is currently submitting (isSubmitting) or if it’s valid (isValid). The submit button is disabled if the form is either submitting or invalid, providing visual feedback to the user during submission.

4. useFormState()

useFormState is designed to manage form state more seamlessly. This hook allows you to manage and track form values without needing to handle state manually, making complex form handling simpler and more declarative.

Use Case: Automatically managing state for multiple form fields in a contact form.

Example: Managing Form Values

import React, { useFormState } from 'react';

function ContactForm() {
    const { values, handleChange } = useFormState({
        name: '',
        email: '',
    });

    return (
        <form>
            <label>
                Name:
                <input
                    type="text"
                    name="name"
                    value={values.name}
                    onChange={handleChange}
                />
            </label>
            <label>
                Email:
                <input
                    type="email"
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
}

Here, useFormState automatically manages the state of name and email. handleChange updates the form values, making form management straightforward and reducing the need for boilerplate state handling.

Conclusion

React 19’s new hooks are a game-changer, making everyday tasks in web development faster, cleaner, and more intuitive. These additions simplify how we handle things like loading data, managing form states, and giving users responsive feedback.

With useOptimistic, you can make the interface feel more responsive by updating the UI instantly, even before the server confirms a user action. Imagine hitting a “like” button and immediately seeing it change state—this creates a seamless experience that feels real-time.

Form handling has also never been easier. useFormStatus and useFormState handle form submission status and input values, so you’re free from manually tracking each input field or handling tedious validation states. These hooks let you focus on your app’s logic instead of repetitive code.

React 19’s use hook streamlines data fetching, making it incredibly simple to load async data right in your component, with minimal code. It works hand-in-hand with Suspense to show a loading indicator until data is ready.

These hooks save time, reduce boilerplate code, and prioritise a smooth user experience, making it easier to create efficient, user-friendly interfaces. React 19 doesn’t just add tools it’s geared toward helping developers work smarter, build better apps, and give users the best experience possible.

15 Essential React 18 Hooks You Need to Know (With Examples)

Vivek Mengu — Sun, 10 Nov 2024 18:49:14 +0000

React 18 has supercharged the way we build functional components. Hooks are a game-changer, letting us write cleaner, more reusable, and easier-to-understand React components. In this blog, we'll dive into 15 essential hooks, from the basics to advanced techniques, and see how they can elevate your React projects.

1. useState

The useState hook allows you to add state variables to functional components. State represents dynamic data, which can change over time based on user interactions or other factors.

Use Case: Managing simple state like form inputs, counters, toggles, etc.

Example: Counter

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // Initial count is set to 0

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

Here, clicking the "Increment" button updates count, and useState re-renders the component whenever count changes.

2. useEffect

useEffect lets you perform side effects in functional components, like data fetching, setting up subscriptions, or manually modifying the DOM. By default, useEffect runs after every render, but it can be configured to run conditionally.

Use Case: Fetching data on component mount, setting up event listeners, or updating the document title.

Example: Fetching Data

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

function DataFetcher() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(setData);
    }, []); // Empty dependency array: runs once on mount

    return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

Here, the useEffect runs once after the component mounts (thanks to the empty dependency array), fetching data and storing it in data.

3. useContext

useContext lets you access global data (like themes or user authentication) that would otherwise have to be passed through many levels of components as props.

Use Case: Accessing global data, such as themes, languages, or authentication status, without prop drilling.

Example: Theme Context

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedComponent() {
    const theme = useContext(ThemeContext);
    return <div>Current theme: {theme}</div>;
}

By using useContext, you can easily access ThemeContext in any component without needing to pass theme as a prop through multiple layers.

4. useReducer

useReducer is an alternative to useState for managing more complex state logic. It works similarly to Redux and is especially helpful for managing states that rely on multiple transitions or involve complex data updates.

Use Case: Managing state with complex logic, like form handling or multi-step workflows.

Example: Counter with Reducer

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        </div>
    );
}

useReducer is ideal here because it separates action types and transitions, making it easy to extend with new actions without cluttering the code.

5. useRef

useRef is a versatile hook that provides a way to store mutable values without causing re-renders. It's commonly used to access and manipulate DOM elements directly.

Use Case: Storing references to DOM elements, managing timers, or holding previous state values.

Example: Focusing an Input Field

import React, { useRef } from 'react';

function FocusInput() {
    const inputRef = useRef();

    return (
        <div>
            <input ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
        </div>
    );
}

Here, inputRef.current.focus() directly manipulates the input element, focusing it without a re-render.

6. useMemo

useMemo is used to optimize performance by memoizing the result of expensive calculations between renders. It only recalculates when its dependencies change.

Use Case: Improving performance for costly calculations or derived values that don’t need recalculating each render.

Example: Expensive Calculation

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

function ExpensiveCalculation({ value }) {
    const result = useMemo(() => {
        return performExpensiveCalculation(value);
    }, [value]);

    return <div>Result: {result}</div>;
}

By memoizing performExpensiveCalculation, React only recalculates when value changes, which can significantly improve performance.

7. useCallback

useCallback is similar to useMemo but memoizes functions. It's useful for passing stable references of callback functions, especially to child components that rely on shallow comparison.

Use Case: Preventing unnecessary re-renders when passing functions as props to child components.

Example: Passing Stable Callback

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

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

    const increment = useCallback(() => {
        setCount(c => c + 1);
    }, []);

    return <Child increment={increment} />;
}

function Child({ increment }) {
    return <button onClick={increment}>Increment</button>;
}

Using useCallback ensures that increment retains the same reference between renders, avoiding unnecessary re-renders of Child.

8. useLayoutEffect

useLayoutEffect is like useEffect but runs synchronously after all DOM mutations. It’s useful when you need to read layout information and make immediate updates to prevent visual flickers.

Use Case: Manipulating the DOM immediately after render to avoid flickering or incorrect initial layout.

Example: Adjusting Layout

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

function ResizableBox() {
    const boxRef = useRef();

    useLayoutEffect(() => {
        const box = boxRef.current;
        box.style.width = '200px';
        box.style.height = '200px';
    }, []);

    return <div ref={boxRef} style={{ backgroundColor: 'lightblue' }} />;
}

useLayoutEffect runs before the component is painted to the screen, ensuring layout adjustments happen immediately.

9. useImperativeHandle

useImperativeHandle customizes the ref value exposed to a parent component when using forwardRef. This allows you to limit what actions the parent can perform on a child component.

Use Case: Exposing specific methods or properties to parent components.

Example: Custom Input with Focus Control

import React, { useImperativeHandle, forwardRef, useRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
    const inputRef = useRef();

    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        }
    }));

    return <input ref={inputRef} />;
});

function Parent() {
    const ref = useRef();

    return (
        <div>
            <CustomInput ref={ref} />
            <button onClick={() => ref.current.focus()}>Focus Input</button>
        </div>
    );
}

With useImperativeHandle, you expose only specific methods like focus, providing better control to the parent.

10. useDebugValue

useDebugValue helps in adding custom labels for your custom hooks to make debugging easier in React DevTools.

Use Case: Debugging custom hooks more effectively.

Example: Debugging a Custom Hook

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

function useCustomHook(value) {
    useDebugValue(value > 10 ? 'High' : 'Low');
    return value;
}

function Component() {
    const value = useCustomHook(15);
    return <div>Value: {value}</div>;
}

In React DevTools, you’ll see a label "High" or "Low" based on the hook’s state, making it clearer when debugging.

11. useId

useId generates unique IDs that are stable across the client and server. This is especially helpful when creating accessible components that require unique identifiers (e.g., for aria labels or htmlFor attributes), without worrying about ID collisions.

Use Case: Associating labels with form elements or ARIA attributes in a way that’s unique across all instances of a component.

Example: Accessible Form Fields

import React, { useId } from 'react';

function FormField() {
    const id = useId();  // Generates a unique ID for this component instance

    return (
        <div>
            <label htmlFor={id}>Username</label>
            <input id={id} type="text" />
        </div>
    );
}

By using useId, every FormField instance will have a unique id, which is essential for accessibility and avoids conflicts when rendering multiple instances of the same component.

12. useTransition

useTransition provides a way to prioritize rendering so that the UI remains responsive during updates that may take longer. It allows you to mark state updates as "transitions" to avoid blocking the main thread and keep the UI interactive.

Use Case: When triggering an update that could delay or "freeze" the UI, such as filtering or sorting a large data set.

Example: Filtering a Large List

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

function SearchableList({ items }) {
    const [query, setQuery] = useState('');
    const [isPending, startTransition] = useTransition();

    const handleSearch = (e) => {
        const value = e.target.value;
        setQuery(value);

        startTransition(() => {
            // Expensive filtering operation marked as a transition
            const filteredItems = items.filter(item => item.includes(value));
            setFilteredItems(filteredItems);
        });
    };

    return (
        <div>
            <input type="text" value={query} onChange={handleSearch} placeholder="Search..." />
            {isPending ? <p>Loading...</p> : <List items={filteredItems} />}
        </div>
    );
}

Here, useTransition ensures that the UI remains responsive by deferring the expensive filtering calculation until it has time to complete. While the filtering occurs, isPending will be true, showing a "Loading..." message.

13. useDeferredValue

useDeferredValue lets you delay updates to a value until the main work is done, helping to prevent UI flickering and maintain smooth rendering for low-priority updates.

Use Case: Displaying non-urgent changes, such as search suggestions, after critical UI tasks are completed.

Example: Deferred Search Suggestions

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

function SearchInput() {
    const [input, setInput] = useState('');
    const deferredInput = useDeferredValue(input); // Defers this value update

    return (
        <div>
            <input 
                type="text" 
                value={input} 
                onChange={(e) => setInput(e.target.value)} 
                placeholder="Type to search..." 
            />
            <SearchSuggestions query={deferredInput} />
        </div>
    );
}

In this example, SearchSuggestions only receives deferredInput, which will lag slightly behind input. This way, SearchSuggestions will update only after more immediate tasks are complete, reducing flickering as the user types quickly.

14. useSyncExternalStore

useSyncExternalStore ensures that React components stay synchronized with external sources of data (such as global state managers or APIs) and handle external updates correctly in concurrent rendering.

Use Case: Integrating with third-party data sources, libraries, or global stores, where changes need to reflect immediately in the component.

Example: Integrating with a Global Store

import React, { useSyncExternalStore } from 'react';
import { subscribe, getState } from './globalStore';

function StoreSubscriber() {
    // Uses the global store’s subscribe and getState functions
    const state = useSyncExternalStore(subscribe, getState);

    return <div>Current Store State: {JSON.stringify(state)}</div>;
}

Here, useSyncExternalStore allows StoreSubscriber to stay in sync with the global store without additional state management code, even in React’s concurrent mode.

15. useInsertionEffect

useInsertionEffect is a low-level hook for injecting styles into the DOM. It runs before DOM mutations, making it ideal for dynamically injecting styles in libraries where critical CSS rendering order matters.

Use Case: Adding styles in libraries or handling third-party CSS where style injection order is critical.

Example: Injecting Styles Dynamically

import React, { useInsertionEffect } from 'react';

function DynamicStyleComponent() {
    useInsertionEffect(() => {
        const style = document.createElement('style');
        style.textContent = '.dynamic { color: blue; }';
        document.head.appendChild(style);

        return () => {
            document.head.removeChild(style);
        };
    }, []);

    return <div className="dynamic">Styled Text</div>;
}

This hook ensures that the .dynamic style is applied immediately before the DOM is rendered, avoiding flickering or style conflicts. It’s particularly valuable in complex styling scenarios where style order matters.

Conclusion

React 18 has introduced a new era of functional component development. Hooks provide a flexible and efficient way to manage state, side effects, and other complex behaviour's within your components.

Each of these React hooks serves a unique purpose that helps you tackle specific challenges in building modern, efficient, and user-friendly applications. By understanding when and why to use them, you can unlock powerful functionality within your components, handle asynchronous rendering smoothly, and maintain a responsive and accessible UI.

If you know any such example to leverage the hooks effectively please share in the comments below. Your insights will be valuable to other developers.

Happy coding! 🚀

Architectural Techniques for React Optimization! Part - 1

Vivek Mengu — Mon, 06 May 2024 19:34:29 +0000

Enhancing the performance of your React application not only improves user satisfaction but also significantly boosts your site’s effectiveness by reducing user churn.

When developing a high-performing web application, it's essential to consider not just the tools and ecosystem but the underlying architecture as well.

In this blog, I will guide you through my top three strategies for optimizing your React application architecture, plus a Part-2 of this series that could make all the difference. Let’s dive deep into methodologies that are both innovative and practical, ensuring your application runs smoothly and efficiently.

1. Start Strong with the Perfect Foundation

Begin your project on a strong foundation by choosing a boilerplate that includes all the essential tools. Covering all essential aspects, a reliable boilerplate should include:

Global State Management for seamless state handling.

API Services Manager for efficient API interactions.

TypeScript for type safety and advanced coding.

Testing Tools for reliability.

Styles and Assets Loaders for effortless management.

Optimized Configuration for enhanced performance.

Bundling Tool for streamlined deployment.

This custom React boilerplate is your secret weapon for building efficient and scalable applications. It provides all the essential tools you need to get started quickly and ensure your app can handle future growth.

Clone the boilerplate today and elevate your React development experience:

git clone https://github.com/vivekmengu016/react-boilerplate-webpack5 myAwesomeProject

Discover how this meticulously curated boilerplate can revolutionize your projects by visiting this GitHub repository.

2. JSON-Based Routing and Code Splitting

Navigate your React app smoothly and quickly by organising your routes in a simple JSON format and breaking down your code into smaller, more manageable pieces.

Part 1: Setting Up JSON-based Routing in React

To streamline navigation in your React app, start by implementing JSON-based routes. This approach helps organize routes clearly and manage components effectively. Here’s how to set it up:

1. Install react-router-dom-jsonroutes

Supercharge your React routing to the next level! This package builds upon react-router-dom v6, offering advanced features like JSON routing, authentication middleware, and robust nested route capabilities.

npm install react-router-dom-jsonroutes --save

2. Define Your Routes:

For better maintainability, establish a central location for your routes. Create a file named routes.jsx and define your routes there.

//routes.jsx
import Dashboard from './modules/Dashboard';
import Projects from './modules/Projects';
import EachProject from './module/EachProject';

const routesList = [
  { path: "", component: Dashboard },
  {
    path: "projects",
    component: Projects,
    children: [{ path: ":id", component: EachProject }],
  },
];

export default routesList;

3. Implement Routing in Your App:

Use the routes in your main index file.

// index.jsx
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import JsonRoutes from 'react-router-dom-jsonroutes';
import routesList from './routes';

function App() {
  return (
    <BrowserRouter>
      <JsonRoutes routesList={routesList} />
    </BrowserRouter>
  );
}

export default App;

For additional options and documentation, visit the react-router-dom-jsonroutes GitHub page.

Part 2: Implementing Code Splitting

To improve load times and performance, integrate code splitting into your route definitions.

1. Install react-loadable:

This package allows for dynamic imports and rendering components asynchronously.

npm install react-loadable --save

2. Modify Routes to Use Loadable Components:

Update your routes.jsx to dynamically load components.

//routes.jsx
...
...
import Loadable from 'react-loadable';
const Loading = () => <div>Loading...</div>;

const DashboardChunk = Loadable({
  loader: () => import('./modules/Dashboard'),
  loading: Loading,
});

const ProjectsChunk = Loadable({
  loader: () => import('./modules/Projects'),
  loading: Loading,
});

const routesList = [
  { path: "", component: DashboardChunk },
  {
    path: "projects",
    component: ProjectsChunk,
    children: [{ path: ":id", component: EachProject }],
  },
];
...

By using route-based code splitting, each route loads only the necessary components, improving the initial load time. This approach centralizes and simplifies managing asynchronous component loading, which can be especially beneficial for large-scale applications.

keep reading our next discussion on prefetching bundles to further optimize your application's performance.

3. Prefetching Code for Faster React Navigation

Prefetching is the process of loading JavaScript code in advance of it being required, potentially based on user interaction patterns like hovering over a link. This can be especially useful for larger chunks of code associated with features that are not immediately needed on the initial load but might be accessed subsequently.

1. Modify the Component Export in routes.jsx:

Export your Loadable component to make it available for prefetching.

// routes.jsx
...
export const DashboardChunk = Loadable({
  loader: () => import('./modules/Dashboard'),
  loading: Loading,
});

export const ProjectsChunk = Loadable({
  loader: () => import('./modules/Projects'),
  loading: Loading,
});
...

2. Enable Prefetching on Hover in header.jsx:

Trigger code loading when the user hovers over the navigation link.

// header.jsx
import React from 'react';
import { NavLink } from 'react-router-dom';
import { DashboardChunk, ProjectsChunk } from './routes';

const Header = () => (
  <ul className="menu">
    <NavLink
      to="/dashboard"
      onMouseOver={() => DashboardChunk.preload()} //this does the magic
    >
      Dashboard
    </NavLink>
    <NavLink
      to="/projects"
      onMouseOver={() => ProjectsChunk.preload()} //this does the magic
    >
      Projects
    </NavLink>
  </ul>
);

By incorporating prefetching, your app can load heavy components in advance based on user interaction, such as hovering over a menu item, drastically reducing the perceived load time.

In conclusion, by following these three steps, you can significantly improve the performance of your React application. Choosing Boilerplate over create-react-app gives you more control over optimization, allowing for easier implementation of these techniques. JSON routes provide a structured approach to route management, and ultimately, you'll have more customization options to enhance your application's performance and robustness. Code splitting is a powerful technique that tackles this issue by breaking down your app into smaller chunks. The result? A significant performance boost for your users.

Don't forget to like this article and subscribe for further insights! Part 2 of this series will be coming soon, so stay tuned!

Enhancing User Experience: The Importance of "Pick Up Where You Left Off"

Vivek Mengu — Sat, 13 Jan 2024 15:12:30 +0000

In the vast landscape of the digital world, where users navigate through a multitude of websites, the ability to pick up where you left off can significantly impact user experience. Whether it's an online shopping cart, a content-rich platform, or a productivity tool, remembering user selections plays a crucial role in fostering a seamless and personalised interaction.

In this blog, we'll explore why it's important to remember user selections and delve into the necessary steps to enhance user experience through storing information in various browser storage mechanisms.

Importance of Remembering User Selections:

Continuity of Experience:

One of the key reasons to remember user selections is to provide a continuous and uninterrupted experience. Imagine a scenario where a user has spent time customising their preferences on a website or application, only to lose all that data upon closing or refreshing the page. By storing this information, users can seamlessly resume their activities without frustration.

Personalisation:

Remembering user selections enables a more personalised experience. Whether it's the preferred language, theme, or saved items in a shopping cart, tailoring the user interface to individual preferences enhances engagement and encourages users to return to the platform.

Efficiency and Time-Saving:

For users engaging in complex or time-consuming tasks, remembering selections can save valuable time. This is particularly true for forms, where users often need to fill in multiple fields. By storing entered information, users can quickly pick up where they left off, avoiding the need to re-enter data.

Understanding User Persistent State:

The concept of remembering user selections is often referred to as "persistent state" or "user persistence" It involves the ability of a system or application to retain and recall specific user choices or configurations across different sessions or interactions. Persistent state is crucial for creating a seamless and personalised user experience by allowing users to pick up where they left off, maintaining their preferences, settings, and selected options over time.

In web development and software design, achieving persistent state often involves storing relevant information on the client-side, utilising technologies such as localStorage, sessionStorage, cookies, IndexedDB or URL Params. These storage mechanisms enable the application to remember and retrieve user selections, providing continuity and customisation in the user's interaction with the platform.

Real-Life Example: Customising e-Commerce Platform Experience

Meet Alex, an enthusiastic shopper who regularly engages with an e-commerce platform to explore the latest products and make purchases. Alex has distinct preferences, including navigating to specific product categories, applying filters to refine search results, utilising sorting options for a more organised view, and opting for a visually appealing dark mode for extended browsing sessions.

Data Storage for Specific Scenarios:

Choosing the most suitable storage mechanism is crucial, requiring thoughtful consideration to align with the unique requirements of your implementation and ensure optimal performance.

Transactional Data:
Use sessionStorage for storing temporary data related to a specific transaction or interaction, ensuring that it is cleared once the user leaves the session.

User Authentication:
Utilise cookies to securely store and recall user login details, offering a convenient and streamlined authentication process during subsequent visits to the platform.

User Preferences:
Store user preferences and settings in localStorage to maintain a consistent experience across sessions.

Long-Term Data:
For applications requiring long-term data storage, such as a recent search history, utilise IndexedDB to ensure reliable and efficient retrieval of information.

Page State via URL:
URL parameters can also be used to maintain state. This is particularly useful if you want to share the state via a URL.

Let's integrate the lionxstorage library to enhance Alex's experience on the e-commerce platform.

lionxStorage is a Javascript and React library that provides a unified interface for storing and retrieving data using various storage mechanisms such as localStorage, sessionStorage, cookies, and indexedDB. It is designed to work seamlessly in both Javascript and React environments.

For more detailed information, refer to the lionxstorage library documentation available at: lionxStorage GitHub Repository.

Let's Begin....

Alex, a devoted visitor to our e-commerce store, deserves a seamless experience. To ensure he doesn't need to log in daily, we can use cookies for authentication. By setting an expiry date, we can maintain the authentication for a specified duration, providing seamless access for Alex.


// Code to store authentication in cookies
const authenticationData = {
  userId: 'Alex123',
  emailId: 'alex@email.com',
  token: 'Bearer ...'
};

const cookiesData = new lionxStorage("cookies");

const expireData = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // Set to expire in 30 days
cookiesData.set("authData", authenticationData, { expires: expireData, path: '/'});

const retrieveData = cookiesData.get("authData");

console.log( retrieveData );

Understanding Alex's preferences, we want to streamline his product discovery. Storing his favourite product details, such as preferred sizes, colours, and price ranges, in localStorage ensures these specifications are pre-selected or prominently displayed.


// Code to store preferred product details in localStorage
const preferredDetails = {
  sizes: ['M', 'L'],
  colours: ['Blue', 'Black'],
  priceRange: '$50 - $100',
};

const localStorageData = new lionxStorage("localStorage");
localStorageData.set("preferredDetails", preferredDetails);

const retrieveData = localStorageData.get("preferredDetails");

console.log( retrieveData );

Now, each time Alex performs a search, the platform intelligently stores the search title and url in the IndexedDB. This strategic move is designed to empower Alex with the ability to quickly revisit his recent searches, offering him a convenient way to click on a title and promptly retrieve the desired product.

This thoughtful integration not only streamlines Alex's exploration process but also contributes to a more personalised and user-friendly shopping journey, ensuring he can effortlessly find what he's looking for


const indexedDBData = new lionxStorage("indexedDB", "userData", 1);

async function indexedDBStorage() {
  try {
    indexedDBSDK.init(["search"]);

    indexedDBSDK.set("search", { id: 1, title: "running shoes in red", url: 'https://example.com?search=...' });
    indexedDBSDK.set("search", { id: 2, title: "sports wear", url: 'https://example.com?search=...' });

    const retrieveData = await indexedDBSDK.get("search");

    console.log( retrieveData );

  } catch (error) {
    console.log("IndexedDB caught error : ", error);
  }
}

As Alex explored the e-commerce store, he found a product he liked and proceeded to checkout. Halfway through, he decided to change the product's colour from blue to black.

Thanks to sessionStorage, the platform effortlessly retained his payment and shipping details, ensuring a smooth and uninterrupted checkout experience as he adjusted the product colour on the single product page.


// Code to store transaction details in sessionStorage
const transactionDetails = {
  productId: '12345',
  productName: 'Sports Shoes',
  quantity: 1,
  totalAmount: '$75.00',
  // ... other transaction details
};

const sessionStorageData = new lionxStorage("sessionStorage");
sessionStorageData.set("transactionDetails", transactionDetails);

const retrieveData = sessionStorageData.get("transactionDetails");

console.log( retrieveData );

Note: The data stored in sessionStorage is automatically cleared when the session ends, such as when the user closes the browser or tab. This automatic cleanup ensures that sensitive transaction details are not retained unnecessarily.

As Alex discovered the perfect pair of sports shoes on the e-commerce platform, he wanted to share his find with a friend while preserving the specific details he had in mind, including the price range, colour, and size.

Leveraging URL parameters, Alex effortlessly encoded these selections into a personalised URL. Now, when his friend opens the link, the product page loads with the exact specifications, creating a seamless and personalised experience for anyone accessing the shared URL.


// Code to generate a URL with parameters
const productDetails = {
  productId: '12345',
  priceRange: '$50 - $100',
  colour: 'Black',
  size: 'M',
  // ... other product details
};

// Convert product details to URL parameters
const urlParams = new URLSearchParams(productDetails);

// Generate the product URL with encoded parameters
const productURL = `https://example.com/product?${urlParams.toString()}`;

// Alex can now share this URL with his friend
console.log(productURL);

With these implementations, we guarantee Alex a personalised and convenient shopping experience.

Conclusion:

By implementing these storage mechanisms tailored to specific use cases, the e-commerce platform creates user-centric environments for individuals like Alex. The ability to seamlessly pick up where Alex left off, whether it's revisiting favourite product categories, maintaining personalised filters, or adhering to a preferred visual theme, not only streamlines the user experience but also cultivates continued engagement and loyalty. Alex feels acknowledged and valued, fostering a positive relationship between the user and the digital platform. In essence, remembering user selections transforms a casual visitor into a satisfied and returning user, illustrating the tangible benefits of thoughtful data storage strategies.

User persistent state is not just a technical aspect; it's a commitment to delivering a user-centric experience that adapts to individual preferences. From websites to incorporating persistent state functionality significantly contributes to user satisfaction, loyalty, and a sense of being truly understood. As developers continue to prioritise this aspect, we can expect digital interactions to become increasingly seamless and tailored, fostering a positive and lasting connection between users and the platforms they engage with.