Why infinite scroll pagination uses useState not using DOM append instead?

Question

I have seen many tutorials and articles which use useState to store all the records on a state instead of using ReactDOM or something to add HTML elements.

For example, they keep previous data and merge with new data and after that set in a useState hook

return [...new Set([...prevBooks, ...res.data.docs.map(b => b.title)])]

I have 2 questions

1. Isn't it a performance problem to have all the records in the state and to print it in JSX by map? There may be millions of records.
2. If I want to add a React component to the end of a div#ID, what should we do in the pagination?

For example, I have this block code:

<article className="col-sm">
  <div className="row client-home-header-post-article-row" id="BlogsPosts">
    {posts.entries.map((item) => (
      <BlogItem post={item} key={item.id} size={4} />
    ))}
  </div>
</article>

And with an action function like const showMore, add another <BlogItem post={item} key={item.id} size={4} /> to the bottom of BlogsPosts ID (like e.append)

I saw this post Append component in React, he suggested without recommending to use ReactDOM.createPortal, but I tested it like this, and it does not work

ReactDOM.createPortal(
 <BlogItem post={item} key={item.id} size={4} />, 
 document.querySelector("#BlogsPosts")!
)

The posts I saw:

• Append component in React
• Reactjs append an element instead of replacing
• How do you append a React Component to an html element
• How to append React components to HTML element using .append()
• How can I append a React component to an html element i?
• Using document.querySelector in React? Should I use refs instead? How?
• Append Element to an Existing Element React

Thank you in advance

Answer 1

Isn't it a performance problem to have all the records in the state and to print it in JSX by map? There may be millions of records.

It depends. A performant server should try to keep the metadata it returns to the browser for each book small. That is, each book object should try to to contain minimal information like a title, author, price, and thumbnail URL, not all the data that the database knows about the book. Something like this:

{
   "title":"MyBook",
   "author":"Jeff Bezos",
   "price":19.99,
   "price_unit":"USD",
   "thumbnail":"https://websitename.s4-bucket.region.UUID-1234"
}

Reducing the amount of data will boost performance by making searching through this data faster on the browser. Each object of this size is also less than 500 bytes, so if you are obtaining 50 items at a time you're only retrieving 25KB data per request, which with modern speeds only takes a few milliseconds.

If I want to add a React component to the end of a div#ID, what should we do in the pagination?

You can use a useMemo hook which will update the BlogItem components you have rendered when the posts change. Something like this should work:

const blogItems = useMemo(()=>posts.entries.map((item) => (
      <BlogItem post={item} key={item.id} size={4} />
    )), [posts.length])

Then in your JSX just do this:

<article className="col-sm">
  <div className="row client-home-header-post-article-row" id="BlogsPosts">
    {blogItems}
  </div>
</article>