diff --git a/.changeset/lemon-planes-deny.md b/.changeset/lemon-planes-deny.md new file mode 100644 index 00000000..b7b1fdf3 --- /dev/null +++ b/.changeset/lemon-planes-deny.md @@ -0,0 +1,5 @@ +--- +"@codedazur/react-pagination": minor +--- + +The useLoadMore hook was added. diff --git a/.changeset/little-kids-shake.md b/.changeset/little-kids-shake.md new file mode 100644 index 00000000..db55343a --- /dev/null +++ b/.changeset/little-kids-shake.md @@ -0,0 +1,5 @@ +--- +"@codedazur/react-essentials": minor +--- + +The useDelayedValue hook was added. diff --git a/packages/react-pagination/hooks/useLoadMore.ts b/packages/react-pagination/hooks/useLoadMore.ts index 18b83c6b..d1f575db 100644 --- a/packages/react-pagination/hooks/useLoadMore.ts +++ b/packages/react-pagination/hooks/useLoadMore.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useMemo, useState } from "react"; export interface UseLoadMoreProps { items: T[]; @@ -6,7 +6,6 @@ export interface UseLoadMoreProps { } /** - * @todo Review this code before releasing it. * @todo Support asynchoronously fetching more items _instead_ of providing all * items at once and using `itemsPerPage` to limit the results. These are two * very different use cases, so evaluate if this hook should support both, or if @@ -19,14 +18,11 @@ export interface UseLoadMoreProps { export function useLoadMore({ items, itemsPerPage }: UseLoadMoreProps) { const [page, setPage] = useState(1); - const [visibleItems, setVisibleItems] = useState( - items.slice(0, itemsPerPage * page), + const visibleItems = useMemo( + () => items.slice(0, itemsPerPage * page), + [page, items, itemsPerPage], ); - useEffect(() => { - setVisibleItems(items.slice(0, itemsPerPage * page)); - }, [page, items, itemsPerPage]); - const isOverflowing = useMemo( () => items.length > page * itemsPerPage, [page, items, itemsPerPage],