0

So far every question I can find about async rendering involves an AJAX call.

I've got a text input in my React app, which you can type into to filter a big list of items rendered underneath. Of course, as this list gets bigger, it gets more expensive, so typing into the search box is slow and laggy.

Is there a way to render the list asynchronously from the text input? Or somehow else have it on a separate thread? I don't really want to turn this into a remote AJAX request just because it's too pricy to render - I have all the data I need already.

Basically, my text input's onChange method points at handleChange, then in each item's render() function, it checks the hiddenBySearch method to see if it should be displayed:

handleChange = value => {
  this.setState({
    searchValue: value
  })
}

hiddenBySearch = item => {
  if(this.props.data.hiddenBySearch){
    return this.props.data.hiddenBySearch(item, this.state.searchValue)
  }else{
    return false
  }
}

There's a little more to it but I'd say it's not relevant.

EDIT: It's not a possible duplicate of this post - I'm specifically asking about offsetting React's rendering. I'm fairly sure it's impossible to put this in a Web Worker.

MitchEff
  • 1,417
  • 14
  • 29
  • 1
    JavaScript is single-threaded. If you really have lots of non-DOM-related CPU-bound work, you might want to use a web worker. But you probably just want to throttle using `setTimeout()`. – SLaks Jan 09 '19 at 01:50
  • Thanks SLaks. It's rendering the items themselves that's really costly - I do want them all to re-render whenever the input value is changed, so setTimeout probably wouldn't help too much. Is there no way to just have a component render asynchronously (thus showing some sort of loader while it's working)? – MitchEff Jan 09 '19 at 02:00
  • Possible duplicate of [Is it possible to 'thread' Javascript and keep access to the UI?](https://stackoverflow.com/questions/7909593/is-it-possible-to-thread-javascript-and-keep-access-to-the-ui) – Heretic Monkey Jan 09 '19 at 02:00
  • Sounds like you should refactor your code a bit. Instead of rendering each component per-list item and having it decide if it should actually show anything, have the parent filter the list and only render components for the elements that should be filtered. This is clearly possible because the function you use to determine if something should be shown is already being passed as a prop from the parent to the children. – Matthew Herbst Jan 09 '19 at 02:03

0 Answers0