What is the best practice to manage data for infinite scrolling list.

[LvChengbin]

I'm a newbie of using jotai, thank you for your great job.
I want to create an hook for infinite scrolling data management, which I hope it can be used like this:

const { state, data, next } = useScrollingData();

if( state.loading ) return '<p>Loading</p>';

useEffect( () => {
    // code for listening to that, like scroll event, and call the `next` method.
} );

return (
    <div>
        {data.list.map( ( item ) => {
              // some code
        } )}
    </div>
);

I think it's a common feature, but I can't find out a clear way to implement it.

[dai-shi]

Thanks for opening a discussion.
I think you can first try with useState and then covert it to an atom.

Would anyone be interested in the challenge?

[himself65]

My idea:

const pageAtom = atom(0);
const dataAtom = atom(async => {
  // load data
})
const nextAtom = atom(null, (get, set) => set(pageAtom, value => value + 1)));

[himself65]

I think hackernews example is doing the same

https://github.com/pmndrs/jotai/blob/main/examples/hacker_news/src/App.tsx