Lazy list loading

In this section, we'll implement a different kind of list, one that scrolls infinitely. Sometimes, users don't actually know what they're looking for, so filtering or sorting isn't going to help. Think about the Facebook news feed you see when you log into your account; it's the main feature of the application and rarely are you looking for something specific. You'll need to see what's going on by scrolling through the list.

To do this using a ListView component, you need to be able to fetch more API data when the user scrolls to the end of the list. To get an idea of how this works, we need a lot of API data to work with. Generators are great at this! So let's modify the mock we created in the previous example so that it just keeps responding with new data:

import fetchMock from 'fetch-mock'; 
 
// Items...keep'em coming! 
function* genItems() { 
  let cnt = 0; 
 
  while (true) { 
    yield `Item ${cnt++}`; 
  } 
...