React: UI Flickering When State Updated

Below are the frames that cause the flicker. What I think is happening is it takes some time for the images to load. While they are loading the items have reduced height. You should make sure SongInfo layout does not depend on whether the image has been loaded or not.

Images not loaded - items are collapsed:

Images were loaded:

I think whats happening is that you are executing a search query on every key stroke which is causing the weird behavior.

Use lodash debounce to avoid doing a search on every key stroke.That should address the flickering. (Also, adding a loading state will help)

Sample debounce component

import React, {Component} from 'react'import { debounce } from 'lodash'class TableSearch extends Component {  //********************************************/  constructor(props){    super(props)    this.state = {        value: props.value    }    this.changeSearch = debounce(this.props.changeSearch, 250)  }  //********************************************/  handleChange = (e) => {    const val = e.target.value    this.setState({ value: val }, () => {      this.changeSearch(val)    })  }  //********************************************/  render() {    return (        <input            onChange = {this.handleChange}            value = {this.props.value}        />    )  }  //********************************************/}