{"action":"created","issue":{"url":"https://api.github.com/repos/orgsync/react-list/issues/24","labels_url":"https://api.github.com/repos/orgsync/react-list/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/orgsync/react-list/issues/24/comments","events_url":"https://api.github.com/repos/orgsync/react-list/issues/24/events","html_url":"https://github.com/orgsync/react-list/issues/24","id":76785850,"number":24,"title":"Question: Implementing 'FetchList'","user":{"login":"babsonmatt","id":853220,"avatar_url":"https://avatars.githubusercontent.com/u/853220?v=3","gravatar_id":"","url":"https://api.github.com/users/babsonmatt","html_url":"https://github.com/babsonmatt","followers_url":"https://api.github.com/users/babsonmatt/followers","following_url":"https://api.github.com/users/babsonmatt/following{/other_user}","gists_url":"https://api.github.com/users/babsonmatt/gists{/gist_id}","starred_url":"https://api.github.com/users/babsonmatt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/babsonmatt/subscriptions","organizations_url":"https://api.github.com/users/babsonmatt/orgs","repos_url":"https://api.github.com/users/babsonmatt/repos","events_url":"https://api.github.com/users/babsonmatt/events{/privacy}","received_events_url":"https://api.github.com/users/babsonmatt/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-05-15T16:50:19Z","updated_at":"2015-05-15T19:58:44Z","closed_at":null,"body":"Any suggestions for the best way to load new items from remote while scrolling?  I was planning to request new items within the itemRenderer method, but I'm not sure that works, as it fires once for every index trying to be rendered and I can't setState some sort of  { loading: true } within the render process to limit repetitive requests for new pages of items while processing.\r\n\r\nAny ideas?\r\n\r\nThanks a lot."},"comment":{"url":"https://api.github.com/repos/orgsync/react-list/issues/comments/102509407","html_url":"https://github.com/orgsync/react-list/issues/24#issuecomment-102509407","issue_url":"https://api.github.com/repos/orgsync/react-list/issues/24","id":102509407,"user":{"login":"caseywebdev","id":1181237,"avatar_url":"https://avatars.githubusercontent.com/u/1181237?v=3","gravatar_id":"","url":"https://api.github.com/users/caseywebdev","html_url":"https://github.com/caseywebdev","followers_url":"https://api.github.com/users/caseywebdev/followers","following_url":"https://api.github.com/users/caseywebdev/following{/other_user}","gists_url":"https://api.github.com/users/caseywebdev/gists{/gist_id}","starred_url":"https://api.github.com/users/caseywebdev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/caseywebdev/subscriptions","organizations_url":"https://api.github.com/users/caseywebdev/orgs","repos_url":"https://api.github.com/users/caseywebdev/repos","events_url":"https://api.github.com/users/caseywebdev/events{/privacy}","received_events_url":"https://api.github.com/users/caseywebdev/received_events","type":"User","site_admin":false},"created_at":"2015-05-15T19:58:44Z","updated_at":"2015-05-15T19:58:44Z","body":"I haven't tested this, but this is the basic idea\r\n\r\n```js\r\nimport _ from 'underscore';\r\nimport myDataFetcher from 'my-data-fetcher';\r\nimport React from 'react';\r\n\r\nclass FetchList extends React.Component {\r\n  pending = [];\r\n  isLoading = false;\r\n  \r\n  request(index) {\r\n    this.pending.push(index);\r\n    this.fetch();\r\n  }\r\n  \r\n  fetch() {\r\n    if (this.isLoading || !this.pending.length) return;\r\n    const from = _.first(this.pending);\r\n    this.isLoading = true;\r\n    myDataFetcher({from}, _.partial(this.handleFetch, from));\r\n  }\r\n  \r\n  handleFetch(from, results) {\r\n    this.isLoading = false;\r\n    this.props.onItemsUpdate(\r\n      _.reduce(results, (items, item, index) => {\r\n        index += from;\r\n        items[index] = item;\r\n        this.pending = _.without(this.pending, index);\r\n        return items;\r\n      }, _.clone(this.props.items))\r\n    );\r\n    this.fetch();\r\n  }\r\n  \r\n  renderItem(index, key) {\r\n    if (!this.props.items[index]) this.request(index);\r\n    return this.props.itemRenderer(index, key);\r\n  }\r\n  \r\n  render() {\r\n    return <List {...this.props} />;\r\n  }\r\n}\r\n```\r\n\r\nWhen you get a `itemRenderer` call for an index you haven't loaded yet, you add that index to a list then try to fetch. After a fetch succeeds, remove all pending indices that were fetched in that request and try fetching again until all requested indices have been loaded. I've elected to remove `ReactList` from this process because it can vary greatly by implementation. Creating your own version of `FetchList` on top of `ReactList` shouldn't be too bad, and will almost always be app-specific."}}