How to merge two array in useState hook?

Hi,
I am trying to implement pagination/load more.
I have an api that gives me 20 results and a link that includes next 20 results.

I want to fetch the next 20 results and merge it to the initial state when I clicked on the load more button.

My questions are

  1. how can i merge the array called hits of two states ? the schema looks like this
const [state, setstate] =useState({
    count:10000
    from:1
    hits:(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    to:20
    _links:{next: {…}
}
  1. is this the right approach to implement load more functionality ?

Yes it is common practice, like this:

const dataToAdd = [{...}]
setstate({...state, hits: {...state.hits,...dataToAdd }})

Except that the OP wanted to create an array and not an object.

yep typo:

const dataToAdd = [{...}]
setstate({...state, hits: [...state.hits,...dataToAdd ]})