Custom Hooks may be executed more than once.

[aufasyaihan]

I was using custom hooks so that my logic would be stored there, but this error came up. The error is when I use the custom hook on Pagination.tsx. Can I ignore the warning or should I fix it?

React Hook "useQueryData" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render.

Pagination.tsx

import { useQueryData } from "../hooks/useQueryData";
import {
    MdOutlineKeyboardDoubleArrowLeft,
    MdOutlineKeyboardDoubleArrowRight,
} from "react-icons/md";
import { GrNext, GrPrevious } from "react-icons/gr";

const Pagination: React.FC = () => {
    const { page, limit, startIndex, filteredData, handlePageChange } = useQueryData();
    const totalPages = Math.ceil(filteredData.length / limit);

    const getStartPage = () => {
        if (page <= 5) {
            return 1;
        }
        return page - 4;
    };

    const getEndPage = () => {
        const startPage = getStartPage();
        const endPage = startPage + 4;
        return endPage > totalPages ? totalPages : endPage;
    };

    const pageNumbers = [];
    for (let i = getStartPage(); i <= getEndPage(); i++) {
        pageNumbers.push(i);
    }

    return (
        <div className="flex justify-end items-center mt-4 h-10">
            <button
                onClick={() => handlePageChange(1)}
                disabled={page === 1}
                className="p-2 h-full bg-gray-900 text-white rounded-s-md disabled:bg-gray-400"
            >
                <MdOutlineKeyboardDoubleArrowLeft />
            </button>
            <button
                onClick={() => handlePageChange(page - 1)}
                disabled={page === 1}
                className="p-2 h-full bg-gray-800 text-white disabled:bg-gray-400"
            >
                <GrPrevious />
            </button>
            <div className="flex items-center">
                {pageNumbers.map((pageNumber) => (
                    <button
                        key={pageNumber}
                        onClick={() => handlePageChange(pageNumber)}
                        className={`px-4 py-2 h-full ${
                            page === pageNumber
                                ? "bg-gray-700 border-none text-white"
                                : ""
                        }  border`}
                    >
                        {pageNumber}
                    </button>
                ))}
            </div>
            <button
                onClick={() => handlePageChange(page + 1)}
                disabled={startIndex + limit >= filteredData.length}
                className="p-2 h-full bg-gray-800 text-white disabled:bg-gray-400"
            >
                <GrNext />
            </button>
            <button
                onClick={() => handlePageChange(totalPages)}
                disabled={startIndex + limit >= filteredData.length}
                className="p-2 h-full bg-gray-900 text-white rounded-e-md disabled:bg-gray-400 text-xl"
            >
                <MdOutlineKeyboardDoubleArrowRight />
            </button>
        </div>
    );
};

export default Pagination;

useQueryData.tsx

import { useState } from "react";
import { useSearchParams } from "react-router";
import { useHome } from "./useHome";

export const useQueryData = () => {
    const { data } = useHome();
    const [searchParams, setSearchParams] = useSearchParams();
    
    const [search, setSearch] = useState<string>(searchParams.get("query") || "");

    const query = searchParams.get("query");
    const sort = searchParams.get("sort");
    const page = parseInt(searchParams.get("page") || "1", 10);
    const limit = parseInt(searchParams.get("limit") || "5", 10);

    const filteredData = data.filter((item) => {
        if (!query) return true;
        return (
            item.name.toLowerCase().includes(query.toLowerCase()) ||
            item.age.toString().includes(query) ||
            item.email.toLowerCase().includes(query.toLowerCase())
        );
    });

    const startIndex = (page - 1) * limit;

    const sortedData = [...filteredData].sort((a, b) => {
        if (!sort || sort === "oldest") {
            return (
                new Date(a.createdAt).getTime() -
                new Date(b.createdAt).getTime()
            );
        }
        return (
            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
        );
    });

    const paginatedData = sortedData.slice(startIndex, startIndex + limit);

    const handlePageChange = (newPage: number) => {
        const newSearchParams = new URLSearchParams(searchParams);
        newSearchParams.set("page", newPage.toString());
        if (query) newSearchParams.set("query", query);
        newSearchParams.set("limit", limit.toString());
        setSearchParams(newSearchParams, { replace: true });
    };

    return {
        searchParams,
        setSearchParams,
        search,
        setSearch,
        query,
        sort,
        page,
        limit,
        startIndex,
        filteredData,
        sortedData,
        paginatedData,
        handlePageChange,
    };
};

[ArnaudBarre]

The code you shared looks fine and doesn't break React hooks rules. The issue is probably is some part of the code I don't see. I think this error is important and you should not ignore it, it means you are breaking some of the rules of React rules and it could lead to bugs with weird behaviors.