useSWRInfinite: reset size on mount

[svenlombaert]

Hi there,

I'm using useSWRInfinite in a react-native app. If you land on the search page you see your last 5 search results with a 'see more' button. All the logic works as expected, except for, when I close the page and I come back, it shows all the previously loaded results and not the first 5, the ones I actually want to show up.

Anyone has a solution for this (imo) common pattern?

Pictures to illustrate. When I come back to this page, I always want the left thing to happen.

[shuding]

it shows all the previously loaded results and not the first 5

Hi! This is the "scroll position recovery" feature for browsers so they can recover the pagination when navigating back, which is enabled by default. But in your case (RN) you don't want to enable it, so I suppose you can try this work around (manually controlling the page size):

const [pageSize, setPageSize] = useState(1)
const { data, setSize } = useSWRInfinite(...)

const dataWithCorrectSize = data.slice(0, pageSize)

return <Div>
  {dataWithCorrectSize.map(item => ...)}
  <Button onClick={() => {
    setPageSize(pageSize + 1)
    setSize(pageSize + 1)
  }}>load more...</Button> 
</Div>

[svenlombaert]

Hmm yeah though about doing that but hoped there would be an undocumented prop with which I could turn that feature off. I think it makes sense, especially with react-native in mind, to have this as a config option.