React: UI Flickering When State Updated

Question

I have a component that displays search data returned from the Spotify API. However, every time I update the state the UI flickers:

Input:

            <DebounceInput
                debounceTimeout={300}
                onChange={handleChange}
            />

Hook:

const [searchResults, setSearchResults] = useState(null)

API call w/ Apollo:

 const searchSpotify = async (query) => {
    const result = await props.client.query({
        query: SearchTracks,
        variables: {
            query
        }
    })
    const tracks = result.data.searchedTracks
    setSearchResults(tracks)
}

Render:

        {searchResults &&
            <div className="search-results">
                    {searchResults.map((song) => (
                            <SongInfo key={song.id} {...song} />
                    ))}
            </div>
        }

I noticed it only happens on the first load. For example, if I were to type the query again it shows without flickering. Is there a better way to implement this so the UI doesn't flicker?

You could add a loading state where when you make the api call to fetch you toggle a loading flag/state. — varoons, Mar 06 '19 at 21:33
Have you tried adding `key` prop to your `SongInfo` element? Something like, `` (change id to whatever property uniquely identifies your song). Adding key prop to list items improves React performance. — abadalyan, Mar 06 '19 at 21:37
@varoons The loading state happens so quickly that it actually makes the UI worse — Travis S., Mar 06 '19 at 21:43
@abadalyan I have a key in my actual code, I tried simplifying it for this question. I edited the component to clarify — Travis S., Mar 06 '19 at 21:44
If you replace SongInfo with simple
{song.name}
does it flicker? — abadalyan, Mar 06 '19 at 21:50
@Powell_v2 There is not. I've been reading guides on it all day but I don't understand how to use it in this scenario. — Travis S., Mar 06 '19 at 22:13

abadalyan · Accepted Answer · 2019-03-06T22:44:04.993

6

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:

edited Mar 06 '19 at 22:44

answered Mar 06 '19 at 22:36

abadalyan

1,205
8
13

You're right, it's definitely an issue with the part of . I set a default height and width and that seems to help but the image itself seems to be flickering as it's loading/rendering. I'm looking into it now. – Travis S. Mar 06 '19 at 23:06

varoons · Answer 2 · 2019-03-06T21:45:23.157

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}
        />
    )
  }

  //********************************************/

}

I'm actually using a [DebounceInput](https://www.npmjs.com/package/react-debounce-input). It did help but it still isn't ideal. I edited the question to clarify. — Travis S., Mar 06 '19 at 21:47

React: UI Flickering When State Updated

2 Answers2