I have implemented a load more button in a new Next.js application, utilizing the useSWRInfinite hook. Each time the button is clicked, it triggers two calls to the backend. The first call is made with index 0 and the second one with the incremented index.
Below is my component code:
function Home() {
const { data, size, setSize } = useSWRInfinite(
(index) => `/api/user?page=${index}&per_page=2`,
(url) => fetch(url).then((r) => r.json()),
{ initialSize: 1 }
)
return <button onClick={() => setSize(size + 1)}>{'load more'}</button>
}
Here is the endpoint used:
export default (req, res) => {
console.log('calling the backend with', req.query)
res.send(200)
}
These are the backend logs generated after clicking the button 3 times:
calling the backend with { page: '0', per_page: '2' }
calling the backend with { page: '1', per_page: '2' }
calling the backend with { page: '0', per_page: '2' }
calling the backend with { page: '2', per_page: '2' }
calling the backend with { page: '0', per_page: '2' }
calling the backend with { page: '3', per_page: '2' }
I am curious as to why the backend is called with page/index 0 before calling with the correct incremented index. Any insights on this behavior?