fix: optimize GitHub search with debounce and request cancellation

Tanayajadhav1 · Tanayajadhav1 · commit 86418ac5e22b · 2026-05-21T10:21:14.000+05:30
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook for debouncing values
+ * Delays updating a state value until after the user stops changing it for a specified duration
+ * 
+ * @param value - The value to debounce
+ * @param delay - The debounce delay in milliseconds (default: 300ms)
+ * @returns The debounced value
+ */
+export const useDebounce = <T,>(value: T, delay: number = 300): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Set up the timeout
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Clean up the timeout if value changes before delay is complete
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+
+  return debouncedValue;
+};
diff --git a/src/hooks/useGitHubData.ts b/src/hooks/useGitHubData.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 
 export const useGitHubData = (getOctokit: () => any) => {
   const [issues, setIssues] = useState([]);
@@ -9,14 +9,42 @@ export const useGitHubData = (getOctokit: () => any) => {
   const [totalPrs, setTotalPrs] = useState(0);
   const [rateLimited, setRateLimited] = useState(false);
 
-  const fetchPaginated = async (octokit: any, username: string, type: string, page = 1, per_page = 10) => {
+  // Store AbortController to cancel in-flight requests
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Cleanup function to cancel any pending requests
+  const cancelPendingRequest = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+
+  // Cleanup on component unmount
+  useEffect(() => {
+    return () => {
+      cancelPendingRequest();
+    };
+  }, [cancelPendingRequest]);
+
+  const fetchPaginated = async (
+    octokit: any,
+    username: string,
+    type: string,
+    page = 1,
+    per_page = 10,
+    signal?: AbortSignal
+  ) => {
     const q = `author:${username} is:${type}`;
     const response = await octokit.request('GET /search/issues', {
       q,
       sort: 'created',
       order: 'desc',
       per_page,
       page,
+      request: {
+        signal, // Pass AbortSignal to the request
+      },
     });
 
     return {
@@ -27,41 +55,62 @@ export const useGitHubData = (getOctokit: () => any) => {
 
   const fetchData = useCallback(
     async (username: string, page = 1, perPage = 10) => {
-        
+      // Validate inputs
+      if (!username || username.trim().length === 0) {
+        setError('Please enter a GitHub username.');
+        return;
+      }
+
       const octokit = getOctokit();
 
-      if (!octokit || !username) return;
+      if (!octokit) {
+        setError('Authentication not initialized.');
+        return;
+      }
+
+      // Cancel any existing in-flight requests
+      cancelPendingRequest();
+
+      // Create new AbortController for this request
+      abortControllerRef.current = new AbortController();
+      const signal = abortControllerRef.current.signal;
 
       setLoading(true);
       setError('');
 
       try {
         const [issueRes, prRes] = await Promise.all([
-          fetchPaginated(octokit, username, 'issue', page, perPage),
-          fetchPaginated(octokit, username, 'pr', page, perPage),
+          fetchPaginated(octokit, username, 'issue', page, perPage, signal),
+          fetchPaginated(octokit, username, 'pr', page, perPage, signal),
         ]);
 
-        setIssues(issueRes.items);
-        setPrs(prRes.items);
-        setTotalIssues(issueRes.total);
-        setTotalPrs(prRes.total);
-        setRateLimited(false);
+        // Check if request was aborted before updating state
+        if (!signal.aborted) {
+          setIssues(issueRes.items);
+          setPrs(prRes.items);
+          setTotalIssues(issueRes.total);
+          setTotalPrs(prRes.total);
+          setRateLimited(false);
+        }
       } catch (err: any) {
+        // Don't show error if request was intentionally aborted
+        if (err.name === 'AbortError') {
+          return;
+        }
+
         const errorMessage = err.message?.toLowerCase() || "";
         if (err.status === 403) {
           setError('GitHub API rate limit exceeded. Please provide a PAT to continue.');
-          setRateLimited(true); 
-        } else if (errorMessage.includes("do not exist")){
+          setRateLimited(true);
+        } else if (errorMessage.includes("do not exist")) {
           setError('User not found. Please check the spelling of the GitHub username.');
-        } else if (err.status === 401 || errorMessage.includes("permission")){
+        } else if (err.status === 401 || errorMessage.includes("permission")) {
           setError('Private repository detected. Please input PAT.');
-        }else if(err.status===404){
+        } else if (err.status === 404) {
           setError('Resource not found.');
-        }
-        else if (errorMessage.includes("validation failed")) {
+        } else if (errorMessage.includes("validation failed")) {
           setError('Invalid GitHub username or insufficient permissions.');
-        }
-        else {
+        } else {
           setError(
             'Unable to fetch GitHub data. Please verify the username, token, or network connection.'
           );
@@ -70,7 +119,7 @@ export const useGitHubData = (getOctokit: () => any) => {
         setLoading(false);
       }
     },
-    [getOctokit]
+    [getOctokit, cancelPendingRequest]
   );
 
   return {
diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
@@ -33,6 +33,7 @@ import {
 import { useTheme } from "@mui/material/styles";
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
+import { useDebounce } from "../../hooks/useDebounce";
 
 const ROWS_PER_PAGE = 10;
 
@@ -79,18 +80,22 @@ const Home: React.FC = () => {
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
 
-  // Fetch data when username, tab, or page changes
+  // Debounce search filters (300ms delay) to prevent excessive re-renders
+  const debouncedSearchTitle = useDebounce(searchTitle, 300);
+  const debouncedSelectedRepo = useDebounce(selectedRepo, 300);
+  const debouncedStartDate = useDebounce(startDate, 300);
+  const debouncedEndDate = useDebounce(endDate, 300);
+  
+  // Debounce username input (400ms delay) to reduce API calls
+  const debouncedUsername = useDebounce(username, 400);
+
+  // Auto-fetch data when debounced username, tab, or page changes
   useEffect(() => {
-    if (username) {
-      fetchData(username, page + 1, ROWS_PER_PAGE);
+    if (debouncedUsername) {
+      setPage(0);
+      fetchData(debouncedUsername, 1, ROWS_PER_PAGE);
     }
-  }, [tab, page]);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
-    e.preventDefault();
-    setPage(0);
-    fetchData(username, 1, ROWS_PER_PAGE);
-  };
+  }, [tab, debouncedUsername, fetchData]);
 
   const handlePageChange = (_: unknown, newPage: number) => {
     setPage(newPage);
@@ -115,24 +120,25 @@ const Home: React.FC = () => {
         }
       });
     }
-    if (searchTitle) {
+    // Use debounced values for filtering
+    if (debouncedSearchTitle) {
       filtered = filtered.filter((item) =>
-        item.title.toLowerCase().includes(searchTitle.toLowerCase())
+        item.title.toLowerCase().includes(debouncedSearchTitle.toLowerCase())
       );
     }
-    if (selectedRepo) {
+    if (debouncedSelectedRepo) {
       filtered = filtered.filter((item) =>
-        item.repository_url.includes(selectedRepo)
+        item.repository_url.includes(debouncedSelectedRepo)
       );
     }
-    if (startDate) {
+    if (debouncedStartDate) {
       filtered = filtered.filter(
-        (item) => new Date(item.created_at) >= new Date(startDate)
+        (item) => new Date(item.created_at) >= new Date(debouncedStartDate)
       );
     }
-    if (endDate) {
+    if (debouncedEndDate) {
       filtered = filtered.filter(
-        (item) => new Date(item.created_at) <= new Date(endDate)
+        (item) => new Date(item.created_at) <= new Date(debouncedEndDate)
       );
     }
     return filtered;
@@ -165,48 +171,41 @@ const Home: React.FC = () => {
 
   return (
     <Container maxWidth="lg" sx={{ mt: 4, minHeight: "80vh", color: theme.palette.text.primary }}>
-      {/* Auth Form */}
+      {/* Auth Inputs */}
       <Paper elevation={1} sx={{ p: 2, mb: 4, backgroundColor: theme.palette.background.paper }}>
-        <form onSubmit={handleSubmit}>
-          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
-            <TextField
-              label="GitHub Username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-              sx={{ flex: 1, minWidth: 150 }}
-            />
-            <TextField
-              label="Personal Access Token"
-              value={token}
-              onChange={(e) => setToken(e.target.value)}
-              type="password"
-              sx={{ flex: 1, minWidth: 150 }}
-              // Helper link to guide users on generating a GitHub Personal Access Token
-              helperText={
-                <Link
-                href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens"
-                target="_blank"
-                rel="noopener noreferrer"
-                sx={{
-      fontSize: '0.75rem',
-      color: 'primary.main',
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline',
-      }
-    }}
-                >
-                  How to generate?
-                </Link>
-              }
-            />
-
-            <Button type="submit" variant="contained" sx={{ minWidth: "120px" }}>
-              Fetch Data
-            </Button>
-          </Box>
-        </form>
+        <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
+          <TextField
+            label="GitHub Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Start typing to search..."
+            sx={{ flex: 1, minWidth: 150 }}
+          />
+          <TextField
+            label="Personal Access Token (optional)"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            type="password"
+            sx={{ flex: 1, minWidth: 150 }}
+            helperText={
+              <Link
+              href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+        fontSize: '0.75rem',
+        color: 'primary.main',
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline',
+        }
+      }}
+              >
+                How to generate?
+              </Link>
+            }
+          />
+        </Box>
       </Paper>
 
       {/* Filters */}
