DEV Community

John Ding
John Ding

Posted on

Implement refetch with axis

https://stackoverflow.com/questions/71191924/how-can-i-re-trigger-a-custom-hook-inside-my-react-component-when-its-states-ha

const useFetchLists = (
url = "",
currentPage = 1,
selectedPageSize = 10,
keyword = ""
) => {
const [items, setItems] = useState([]);
const [loading, setloading] = useState(false);
const [totalPage, setTotalPage] = useState(1);
const [totalItemCount, setTotalItemCount] = useState(0);

const fetchListData = useCallback(async () => {
try {
setloading(true);
await Adapter.get(
${url}?pageNumber=${currentPage}&pageSize=${selectedPageSize}&keyword=${keyword},
{}
).then((response) => {
setItems(response.data.items);
setTotalPage(response.data.totalPages);
setTotalItemCount(response.data.totalItems);
});
} catch (err) {
} finally {
setloading(false);
}
}, [url, currentPage, selectedPageSize, keyword]);

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

return {
data: [items, loading, totalPage, totalItemCount],
refetch: fetchListData
};
};

export default useFetchLists;

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay