shoc-frontend-new/src/pages/accounts/list/useAccounts.js

import { useCallback, useEffect, useMemo, useState } from "react";
import { fetchAccountsPaged } from "./api";

export default function useAccounts() {
  const [rows, setRows] = useState([]);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState("");

  const reload = useCallback(() => {
    setLoading(true);
    setErr("");
    fetchAccountsPaged({ search, page, pageSize })
      .then(({ rows, totalCount }) => {
        setRows(rows);
        setTotalCount(totalCount);
      })
      .catch((e) => setErr(e.message || "Failed to load"))
      .finally(() => setLoading(false));
  }, [search, page, pageSize]);

  useEffect(() => { reload(); }, [reload]);

  return useMemo(() => ({
    rows, search, setSearch, page, setPage, pageSize, setPageSize,
    totalCount, loading, err, reload
  }), [rows, search, page, pageSize, totalCount, loading, err, reload]);
}