Load More Pagination

./app/posts/page.tsx

'use client'

import { useEffect, useState } from "react"


export default function Page() {
  const [items, setItems] = useState([]);
  const [visible, setVisible] = useState(24)

  const showMoreItems = () => {
    setVisible((prevValue) => prevValue + 24)
  }

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
    .then((res) => res.json())
    .then((data) => setItems(data))
  }, [])

  return (
    <div className='container py-4'>
      <div className="grid sm:grid-cols-2 gap-4">
      {items.slice(0, visible).map((item: any) =>(
        <div key={item.id} className="p-4 border rounded-lg space-y-2">
          <h2 className="tetx-xl font-bold">{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
      </div>

      <button className="py-3 w-full bg-blue-600 text-white mt-4 rounded-lg" onClick={showMoreItems}>Загрузить еще</button>
    </div>
  )
}

Load More V2

./app/posts/page.tsx

"use client";
import { useState } from "react";

export default function LoadMore() {
  // LoadMore
  const articlesShown = 12;
  const [loadMore, setLoadMore] = useState(articlesShown);
  const showMoreArticles = () => {
    setLoadMore(loadMore + articlesShown);
  };

  return (
    <>
      {posts.slice(0, loadMore).map((post) => (
        <div key={post._id} className="space-y-5">
          <h2>{post.title}</h2>
        </div>
      ))}

      <div className="text-center">
        {loadMore < posts?.length ? (
          <div className="flex justify-center">
            <button
              type="button"
              className="rounded-lg bg-blue-600 px-12 py-4 text-white"
              onClick={showMoreArticles}
            >
              Load More
            </button>
          </div>
        ) : (
          <button
            type="button"
            className="cursor-not-allowed rounded-lg bg-blue-200 px-12 py-3 text-black"
            onClick={showMoreArticles}
            disabled
          >
            everything is loaded
          </button>
        )}

        <div className="mt-5 flex justify-center">
          Downloaded Posts: {loadMore} from {posts?.length}
        </div>
      </div>
    </>
  );
}