Debouncing Filter Input for Large Dataset in React TanStack Table

Example of implementing a debounce function for the global filter input to enhance performance and user experience when dealing with large datasets in React TanStack Table.
import { useState, useEffect } from 'react';
Importing useState and useEffect hooks from React.
import { useReactTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel } from '@tanstack/react-table';
Importing functions from @tanstack/react-table to manage table state, filtering and pagination.
function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => setDebouncedValue(value), delay);

        return () => clearTimeout(handler);
    }, [value, delay]);

    return debouncedValue;
Defining a custom hook to debounce values. This delays the update of the value state until after a specified delay, improving performance for operations like filtering on fast input.
const TableComponent = ({ data, columns }) => {
    const [globalFilter, setGlobalFilter] = useState('');
    const debouncedGlobalFilter = useDebounce(globalFilter, 300);

    const table = useReactTable({
        state: { globalFilter: debouncedGlobalFilter },
        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onGlobalFilterChange: setGlobalFilter

    return (
                onChange={e => setGlobalFilter(}
                placeholder="Search all columns..."
            {/* Render table UI using table instance */}
Creating a TableComponent that utilizes the useReactTable hook from @tanstack/react-table, and integrates the useDebounce hook to implement a debounced global filter. The input's onChange updates the globalFilter state, which is debounced before being applied to the table's global filter, effectively reducing the number of re-renders and enhancing performance.