DEV Community: Mayank vishwakarma

🚀 Build a Production-Ready React Data Fetching Hook with TypeScript

Mayank vishwakarma — Tue, 05 Nov 2024 12:39:45 +0000

Data fetching is a fundamental part of modern web applications, but managing loading states, errors, retries, and cleanup can be complex. In this post, we'll dive deep into useFetcher, a powerful custom React hook that simplifies data fetching while providing advanced features like automatic retries, abort handling, and cleanup.

The Problem

When fetching data in React components, we often need to handle several concerns:

Loading states
Error handling
Automatic retries
Cleanup on unmount
Aborting ongoing requests
Periodic refetching
Memory leaks

Managing all these aspects manually can lead to verbose, error-prone code. Let's see how we can solve this with a custom hook.

Introducing useFetcher

useFetcher is a custom hook that encapsulates all these concerns into a clean, reusable interface. Here's a basic example of how to use it:

const { data, loading, error, refetch } = useFetcher(
  async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return { data };
  },
  { fetchOnLoad: true }
);

Key Features

1. Type Safety

The hook is fully typed using TypeScript generics:

type FetcherResponse<T> = {
  data: T;
};

interface FetcherOptions<T> {
  fetchOnLoad?: boolean;
  retryIntervalInSec?: number;
  initialData?: T;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
  enabled?: boolean;
}

This ensures type safety throughout your application and provides excellent IDE support.

2. Automatic Loading States

The hook manages loading states internally, providing a boolean loading flag that you can use to show loading indicators:

const { loading } = useFetcher(fetchData);
return loading ? <LoadingSpinner /> : <DataDisplay />;

3. Error Handling

Errors are caught and normalized into a consistent format:

const { error } = useFetcher(fetchData, {
  onError: (error) => {
    console.error('Fetch failed:', error);
  }
});

4. Automatic Retries

You can enable automatic retrying with a specified interval:

const { data } = useFetcher(fetchData, {
  retryIntervalInSec: 30  // Retry every 30 seconds
});

5. Abort Control

The hook automatically handles request abortion when the component unmounts or when a new request is initiated:

const { refetch } = useFetcher(fetchData);
// Calling refetch() will abort any ongoing request
// and start a new one

Advanced Usage

Conditional Fetching

You can control when the fetcher is enabled:

const { data } = useFetcher(fetchUserData, {
  enabled: !!userId,  // Only fetch when userId is available
  fetchOnLoad: true
});

Success and Error Callbacks

Handle success and error cases with callbacks:

const { data } = useFetcher(fetchData, {
  onSuccess: (data) => {
    toast.success('Data loaded successfully!');
  },
  onError: (error) => {
    toast.error(`Failed to load: ${error.message}`);
  }
});

Complete Implementation

Here's the full implementation of the useFetcher hook:

import { useCallback, useEffect, useRef, useState } from 'react';

type FetcherResponse<T> = {
  data: T;
};

interface FetcherOptions<T> {
  fetchOnLoad?: boolean;
  retryIntervalInSec?: number;
  initialData?: T;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
  enabled?: boolean;
}

interface FetcherState<T> {
  data: T | null;
  error: Error | null;
  loading: boolean;
}

export default function useFetcher<T>(
  callback: (signal?: AbortSignal) => Promise<FetcherResponse<T>>,
  options: FetcherOptions<T> = {}
) {
  const {
    fetchOnLoad = false,
    retryIntervalInSec,
    onSuccess,
    onError,
    enabled = true,
  } = options;

  const intervalRef = useRef<ReturnType<typeof setInterval>>();
  const abortControllerRef = useRef<AbortController>();
  const isMountedRef = useRef(true);

  const [state, setState] = useState<FetcherState<T>>({
    data: null,
    error: null,
    loading: false,
  });

  const fetcher = useCallback(
    async (signal?: AbortSignal) => {
      if (!enabled) return;

      setState((prev) => ({ ...prev, loading: true }));

      try {
        const response = await callback(signal);
        if (!isMountedRef.current) return;

        setState({
          data: response.data,
          error: null,
          loading: false,
        });

        onSuccess?.(response.data);
      } catch (error: any) {
        if (error.name === 'AbortError') return;
        if (!isMountedRef.current) return;

        const errorObject = error instanceof Error ? error : new Error(
          error?.message || 'Unknown error'
        );

        if ('status' in error) {
          (errorObject as any).status = error.status;
        }

        setState((prev) => ({
          ...prev,
          error: errorObject,
          loading: false,
        }));

        onError?.(errorObject);
      }
    },
    [callback, enabled, onSuccess, onError]
  );

  useEffect(() => {
    if (
      fetchOnLoad &&
      enabled &&
      !state.data &&
      !state.error &&
      !state.loading
    ) {
      fetcher();
    }
  }, [fetchOnLoad, enabled, state.data, state.error, state.loading, fetcher]);

  useEffect(() => {
    if (enabled && retryIntervalInSec && !state.error) {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }

      intervalRef.current = setInterval(fetcher, retryIntervalInSec * 1000);
    }

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [enabled, retryIntervalInSec, state.error, fetcher]);

  useEffect(() => {
    return () => {
      isMountedRef.current = false;
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  const refetch = useCallback(() => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    abortControllerRef.current = new AbortController();
    return fetcher(abortControllerRef.current.signal);
  }, [fetcher]);

  return {
    ...state,
    refetch,
  };
}

Usage Examples

Let's look at some real-world examples of how to use this hook:

Basic Usage

function UserProfile({ userId }: { userId: string }) {
  const { data, loading, error } = useFetcher<User>(
    async () => {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      return { data };
    },
    { fetchOnLoad: true }
  );

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return <div>Hello, {data.name}!</div>;
}

With Auto-Retry

function LiveDataFeed() {
  const { data } = useFetcher<LiveData>(
    async () => {
      const response = await fetch('/api/live-feed');
      const data = await response.json();
      return { data };
    },
    {
      fetchOnLoad: true,
      retryIntervalInSec: 30,
      onError: (error) => {
        console.error('Failed to fetch live data:', error);
      }
    }
  );

  return <div>{data?.latestValue}</div>;
}

With Abort Control

function SearchResults({ query }: { query: string }) {
  const { data, refetch } = useFetcher<SearchResult[]>(
    async (signal) => {
      const response = await fetch(`/api/search?q=${query}`, { signal });
      const data = await response.json();
      return { data };
    },
    { enabled: query.length > 0 }
  );

  useEffect(() => {
    refetch();
  }, [query, refetch]);

  return <ResultsList results={data || []} />;
}

Best Practices

Always provide error handling: Use the onError callback or handle the error state in your UI.
Be mindful of retry intervals: Choose appropriate retry intervals based on your use case.
Clean up resources: The hook handles cleanup automatically, but be aware of any additional cleanup needed in your fetch callback.
Use TypeScript: Take advantage of the type safety provided by the hook.

Conclusion

The useFetcher hook provides a robust solution for handling data fetching in React applications. With its TypeScript support, automatic cleanup, and advanced features like retries and abort control, it can significantly simplify your data fetching logic while maintaining good practices and avoiding common pitfalls.

Feel free to use this hook in your projects and adapt it to your specific needs. The complete implementation is available above, and you can modify it to add more features or adjust the behavior to match your requirements.

Happy Coding 😊!

Simplifying React Router Query Parameter Management with Custom Hooks

Mayank vishwakarma — Mon, 08 Apr 2024 13:07:32 +0000

Managing query parameters in a React application can be challenging, especially when you need to synchronize them with your component's state.

React Router provides hooks like useLocation and useSearchParams to help with this, but managing them together can still be complex.

In this blog post, we'll introduce an enhanced custom hook, useQueryParams, that simplifies the management of query parameters and adds a new feature to remove query parameters from the URL.

Introducing `useQueryParams` Custom Hook

The useQueryParams custom hook combines the functionality of useLocation, useSearchParams, and adds the ability to manage query parameters more effectively. It provides four main functionalities:

Accessing All Query Parameters: Easily access all query parameters and their values as an object.
Accessing a Specific Query Parameter: Get the value of a specific query parameter by its key.
Updating Query Parameters: Update the value of a query parameter, which automatically updates the browser's URL.
Removing Query Parameters: Remove a query parameter from the URL by its key.

Hook Implementation:

Create a useQueryParams.ts file in src/hooks folder:

import { useEffect, useState } from "react";
import { useLocation, useSearchParams } from "react-router-dom";

export default function useQueryParams() {
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const [allQueryParams, setAllQueryParams] = useState(Object.fromEntries(searchParams));

  useEffect(() => {
    setAllQueryParams(Object.fromEntries(searchParams));
  }, [searchParams]);

  const getQueryParamByKey = (key: string) => {
    const params = new URLSearchParams(location.search);
    return params.get(key) || "";
  };

  const setQueryParam = (key :string, value: string) => {
    const params = new URLSearchParams(location.search);
    params.set(key, value.toString());
    setSearchParams(params.toString());
  };

  const removeQueryParamByKey = (key: string) => {
    const params = new URLSearchParams(location.search);
    params.delete(key);
    setSearchParams(params.toString());
  };

  return {
    allQueryParams,
    getQueryParamByKey,
    setQueryParam,
    removeQueryParamByKey,
  };
}

How to Use `useQueryParams` Hook

To use the useQueryParams hook, follow these steps:

Import the Hook:

import useQueryParams from './hooks/useQueryParams';

Accessing All Query Parameters:

const { allQueryParams } = useQueryParams();

This gives you an object containing all query parameters and their values.

Accessing a Specific Query Parameter:

const searchTerm = getQueryParamByKey('search');
const currentPage = getQueryParamByKey('page');

This retrieves the value of a specific query parameter by its key.

Updating Query Parameters:

setQueryParam('search', 'react hooks');
setQueryParam('page', 2);

This updates the value of a query parameter, which will reflect in the browser's URL.

Removing Query Parameters:

removeQueryParamByKey('page');

This removes the page query parameter from the URL.

Example Usage

Here's a simple example demonstrating the usage of the useQueryParams hook in a React component:

App.tsx

import { ChangeEvent, useEffect, useState } from 'react';
import useQueryParams from './hooks/useQueryParams';

function App() {
  const { allQueryParams, getQueryParamByKey, setQueryParam, removeQueryParamByKey } =
    useQueryParams();

  const [input, setInput] = useState<string>(getQueryParamByKey('search'));
  const [page, setPage] = useState<number>(Number(getQueryParamByKey('page')));

  useEffect(() => {
    setQueryParam('search', input);
  }, [input]);

  useEffect(() => {
    setQueryParam('page', page.toString());
  }, [page]);

  return (
    <div>
      <h1>All Query Params:</h1>
      <pre>{JSON.stringify(allQueryParams)}</pre>
      <h1>Query Param by Key:</h1>
      <span>Search Box : </span>
      <input
        type="text"
        value={input}
        onChange={(event: ChangeEvent<HTMLInputElement>) => {
          setInput(event.target.value);
        }}
      />
      <div>
        <button
          onClick={() => {
            page > 0 && setPage(page - 1);
          }}
        >
          {'<'}
        </button>
        <span> Current Page: {getQueryParamByKey('page')} </span>
        <button
          onClick={() => {
            setPage(page + 1);
          }}
        >
          {'>'}
        </button>
      </div>
      <h1> Remove query param </h1>
      <button
          onClick={() => {
            removeQueryParamByKey('page')
          }}
        >Revome page
        </button>
        <button
          onClick={() => {
            removeQueryParamByKey('search')
          }}
        >Remove search
        </button>

    </div>
  );
}

export default App;

To use the useQueryParams custom hook with React Router, make sure you wrap your application in a BrowserRouter component. This is required for the useLocation and useSearchParams hooks to work correctly. Here's how you can add the BrowserRouter to your application:

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path={'/'} element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

Conclusion

Managing query parameters in a React application can be simplified with the useQueryParams custom hook. By encapsulating the logic for accessing, updating, and removing query parameters, this hook provides a cleaner and more maintainable approach to handling query parameters in your React components. Try it out in your next project and streamline your query parameter management!

Happy Coding 😊!

Using the React Context API to Create a Loader Component

Mayank vishwakarma — Mon, 01 Apr 2024 05:32:25 +0000

Web applications frequently include loading indicators, which give users indicators of progress while information or data is being retrieved or processed. In this article, we'll use React's Context API to develop a reusable loader component.

Setting Up the Project

First, let's set up a new React project. Make sure you have Node.js and npm installed, and then run the following commands:

npm init @vitejs/app loader-provider-demo --template react
cd loader-provider-demo

Creating the Loader Context

Create a new file named LoaderContext.tsx in the src folder. This file will define our loader context and provide the necessary context provider and consumer components.

import React, { ReactNode, createContext, useState } from 'react';
import { Loader } from '../component/Loader';

type LoaderContext = {
  showLoader: (message: string) => void;
  hideLoader: () => void;
};

type LoaderContextProvider = {
  children: ReactNode;
};

export const LoaderContext = createContext<LoaderContext | undefined>(
  undefined
);

export const LoaderProvider: React.FC<LoaderContextProvider> = ({
  children,
}) => {
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const [loaderMessage, setLoaderMessage] = useState<string | undefined>();

  const contextValue: LoaderContext = {
    showLoader: (message) => {
      setLoaderMessage(message);
      setIsVisible(true);
    },
    hideLoader: () => {
      setIsVisible(false);
    },
  };

  return (
    <LoaderContext.Provider value={contextValue}>
      {isVisible && <Loader message={loaderMessage} />}
      {children}
    </LoaderContext.Provider>
  );
};

Create a new file named useLoader.ts in the src/hooks folder.

import { useContext } from "react";
import { LoaderContext } from "../context/LoaderProvider";

export const useLoader = ()=>{
  const context = useContext(LoaderContext);
    if (!context) {
      throw new Error("useLoader must be used within a LoaderProvider");
    }
    return context;
}

Creating the Loader Component

Next, let's create the Loader component ( create Loader.tsx file in src/components/loader folder) that will display the loading indicator:

import React from 'react';
import "./Loader.css";

type Loader = {
  message: string | undefined;
};

export const Loader: React.FC<Loader> = ({ message }) => {
  return (
    <div className="loader">
      <span className="spinner"></span>
      <span className="loader-message">{message}</span>
    </div>
  );
};

Styling the Loader Component

Add the following CSS code to a file named Loader.css in your src/components/loader folder to style the loader component:

.loader{
  position: absolute;
  z-index: 99999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: white;
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.spinner{
  width: 60px;
  height: 60px;
  border: 10px solid #ccc;
  border-top: 10px solid #2F73A3;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader-message{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 600;
  color : #2F73A3;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Using the Loader Context

Now, let’s use our LoaderProvider in the main.tsx file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { LoaderProvider } from './context/LoaderProvider.tsx';

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

Using the Custom Hook to Show Loader

In any component where you want to show the loader, you can use the useLoader custom hook:

import './App.css';
import { useLoader } from './hooks/useLoader';

function App() {
  const { showLoader, hideLoader } = useLoader();

  return (
    <>
      <button onClick={() => showLoader("Please wait!")}>Show Loader</button>
      <button style={{position:'absolute',zIndex:"99999"}} onClick={() => hideLoader()}>hide Loader</button>
    </>
  );
}

export default App;

Conclusion

In this tutorial, we've created a loader component using React's Context API, allowing us to manage loading states globally across our application. This approach provides a clean and efficient way to handle loading indicators and can be easily extended to suit different use cases.

Feel free to customize the loader component's appearance and behavior to fit your application's needs.

Happy coding!

Creating a React Alert Component with Custom Hooks and Context

Mayank vishwakarma — Sat, 30 Mar 2024 12:24:43 +0000

Discover how to use custom hooks and context to create an Alert Provider in a React application. This real-time example shows you how to easily show alerts across your application by managing them centrally.

Creating an Alert Provider in React Using Context and Custom Hooks

In any web application, providing feedback to users is crucial for a good user experience. One common way to provide feedback is through alerts, which notify users about important information or actions. In this blog post, we’ll explore how to create an Alert Provider in a React application using Context and custom hooks. This Alert Provider will allow us to show alerts anywhere in our application with ease.

Setting Up the Project

First, let's set up a new React project using Create React App:

npm init @vitejs/app alert-provider-demo --template react
cd alert-provider-demo

Next, install the Bootstrap package for styling our alerts:

npm install react-bootstrap bootstrap

Creating the Alert Context

We’ll start by defining our Alert Context and Alert Provider.

Create a new file named AlertContext.tsx in the src/context folder:

import React, { ReactNode, createContext, useEffect, useState } from 'react';
import Alert from 'react-bootstrap/Alert';
import 'bootstrap/dist/css/bootstrap.min.css';

type AlertType = 'Success' | 'Error' | 'Warning';

type Alert = {
  type: AlertType;
  message: string;
};

type AlertContext = {
  showAlert: (type: AlertType, message: string) => void;
};

type AlertContextProvider = {
  children: ReactNode;
};

// Create a new context for the Alert
export const AlertContext = createContext<AlertContext>({
  showAlert: () => {},
});

export const AlertProvider: React.FC<AlertContextProvider> = ({ children }) => {
  const [alertMessage, setAlertMessage] = useState<Alert[]>([]);

  // Function to hide an alert based on its index
  const hideAlert = (index: number) => {
    setAlertMessage((prev) => prev.filter((_, i) => i != index));
  };

  // UseEffect hook to remove the first alert message after 3 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setAlertMessage((prevItems) => {
        if (prevItems.length > 0) {
          return prevItems.filter((_, i) => i != 0);
        }
        clearInterval(interval);
        return prevItems;
      });
    }, 3 * 1000);
    return () => clearInterval(interval);
  }, []);

  // Context value containing the showAlert function
  const contextValue: AlertContext = {
    showAlert: (type, message) => {
      const alertMessage: Alert = {
        type,
        message,
      };
      setAlertMessage((prev) => [...prev, alertMessage]);
    },
  };

  return (
    <AlertContext.Provider value={contextValue}>
      <div
        style={{
          position: 'absolute',
          width: '100%',
          paddingTop: 10,
        }}
      >
        {alertMessage.map((alert, index) => (
          <Alert
            key={index}
            style={{ margin: 0, width: '100%' }}
            variant={alert.type.toLowerCase()}
            onClose={() => hideAlert(index)}
            dismissible
          >
            <div>{alert.message}</div>
          </Alert>
        ))}
      </div>
      {children}
    </AlertContext.Provider>
  );
};

Create a new file named useAlert.ts in the src/hooks folder.

import { useContext } from "react";
import { AlertContext } from "../context/AlertProvider";

export const useAlert = ()=>{
  const context = useContext(AlertContext);
    if (!context) {
      throw new Error("useAlert must be used within a AlertProvider");
    }
    return context;
}

Using the Alert Provider

Now, let’s use our AlertProvider in the main.tsx file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { AlertProvider } from './context/AlertProvider.tsx';

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

Using the Custom Hook to Show Alerts

In any component where you want to show an alert, you can use the useAlert custom hook:

import React from 'react';
import { useAlert } from './hooks/useAlert';

function App() {
  const { showAlert } = useAlert();

  const handleClick = () => {
    showAlert('Success', 'This is a success message!');
  };

  return (
    <div>
      <button onClick={handleClick}>Show Alert</button>
    </div>
  );
}

export default App;

Conclusion

This article demonstrated how to use Context and custom hooks to construct an Alert Provider in a React application. This solution enables you to manage alerts in a centralized manner, making it simple to show alerts throughout your application. Vite’s quick development environment improves your workflow and makes React programming even more efficient.

DEV Community: Mayank vishwakarma

🚀 Build a Production-Ready React Data Fetching Hook with TypeScript

The Problem

Introducing useFetcher

Key Features

1. Type Safety

2. Automatic Loading States

3. Error Handling

4. Automatic Retries

5. Abort Control

Advanced Usage

Conditional Fetching

Success and Error Callbacks

Complete Implementation

Usage Examples

Basic Usage

With Auto-Retry

With Abort Control

Best Practices

Conclusion

Simplifying React Router Query Parameter Management with Custom Hooks

Introducing useQueryParams Custom Hook

Hook Implementation:

How to Use useQueryParams Hook

Example Usage

Conclusion

Using the React Context API to Create a Loader Component

Setting Up the Project

Creating the Loader Context

Creating the Loader Component

Styling the Loader Component

Using the Loader Context

Using the Custom Hook to Show Loader

Conclusion

Creating a React Alert Component with Custom Hooks and Context

Creating an Alert Provider in React Using Context and Custom Hooks

Setting Up the Project

Creating the Alert Context

Using the Alert Provider

Using the Custom Hook to Show Alerts

Conclusion

Introducing `useQueryParams` Custom Hook

How to Use `useQueryParams` Hook