I have a react parent component that displays a list of data (profile cards for users). Each piece of data is a child component composed of a dozen or so sub-components (a rendered profile card).
I'm having trouble with performance when sorting and filtering this list.
In the parent component, I maintain the sorted/filtered list of data, and map it onto children during the render() method:
...
{ this.state.dataList.map(dataPoint =>
<ProfileCardController key={dataPoint.key} data={dataPoint} />
}
...
When sorting/filtering, I update this list, triggering an update on each child. When there are tens or hundreds of children, this is slow.
How can I improve the performance of this app?
Note: I've ruled out the speed of the following parts of the app:
- The sorting/filtering itself. I use lunr.js and it's more than fast enough
- Updates/re-rendering of the rest of the page (they're dwarfed by the ProfileCardController updates).
One idea is to keep all of the ProfileCardControllers rendered, but use something like display: none to hide the ones that aren't matched for the current filter. I'd also have to sort the list so that the matches show up on top in the correct order. This seems messy, but perhaps it's the way to go?