Big list performance with React

Question

I am in the process of implementing a filterable list with React. The structure of the list is as shown in the image below.

PREMISE

Answer 1

Like I mentioned in my comment, I doubt that users need all those 10000 results in the browser at once.

What if you page through the results, and always just show a list of 10 results.

I've created an example using this technique, without using any other library like Redux. Currently only with keyboard navigation, but could easily be extended to work on scrolling as well.

The example exists of 3 components, the container application, a search component and a list component. Almost all the logic has been moved to the container component.

The gist lies in keeping track of the start and the selected result, and shifting those on keyboard interaction.

nextResult: function() {
  var selected = this.state.selected + 1
  var start = this.state.start
  if(selected >= start + this.props.limit) {
    ++start
  }
  if(selected + start < this.state.results.length) {
    this.setState({selected: selected, start: start})
  }
},

prevResult: function() {
  var selected = this.state.selected - 1
  var start = this.state.start
  if(selected < start) {
    --start
  }
  if(selected + start >= 0) {
    this.setState({selected: selected, start: start})
  }
},

While simply passing all the files through a filter:

updateResults: function() {
  var results = this.props.files.filter(function(file){
    return file.file.indexOf(this.state.query) > -1
  }, this)

  this.setState({
    results: results
  });
},

And slicing the results based on start and limit in the render method:

render: function() {
  var files = this.state.results.slice(this.state.start, this.state.start + this.props.limit)
  return (
    

      
      
    
  )
}

Fiddle containing a full working example: https://jsfiddle.net/koenpunt/hm1xnpqk/