Webpage does not immediately update when state changed

JavaScript
1

I am currently writing my little blog system using Vite with Baserow and everything seems to be working but one thing. When I try to change the number of items displayed per page or change to other items. The UI doesn’t immediately update until I make the changes a second time. Even then, the updated UI content displays data from the previous state change. Is there something I am missing?

Below is the link to the devbox I am using for the coding:

https://codesandbox.io/p/devbox/music-collection-c9l5cj?file=%2Fsrc%2FApp.tsx

2

Don’t nest component definitions inside other components.

Refactor pullNewsData to be its own component (uppercase name, no async) and move the data fetching up to the most common parent component (I’m guessing that would be App). Pass down the data to the child components. You will have to change quite a few things.

3

Thanks for the tips. I will take another look and clean up the code.