重新渲染反应时组件闪烁

Question

I have a list of favourites in my page and when I click on remove, I will send an API call in my redux action that removes that favourite from the favourites listing. Something like this:

constructor(props) {
    super(props);
    this.state = {
        favourite: null
    };

    this.getFavourite();

}

getFavourite() {
   // get api call
}

removeFav(id) {
    const { removeFav } = this.props;

    removeFav(id);
    this.setState({ favourite: null });
}

However, since the API doesn't return the entire list again, I need to call another method to fetch the entire list (now without the one I just removed).

componentDidUpdate(prevState) {
    if (prevState.favourite !== this.state.favourite) {
        this.getFavourites();
    }
}

However, the page seems to flicker a bit every time I click on "Remove" due to this re-rendering.

Do I even need to do a componentDidUpdate() or setting the state to null for the favourite is enough? If I do this, then I don't encounter the flicker but the UI is just updated through the state and not the actual data from the store (unless, I refresh the page since I call getFavourites() when the page loads.

Answer 1

If you're using redux, this is the recommended way to do it:

1. On componentDidMount : dispatch an action which contains fetching api, for you it's getFavorite , then store api data in redux store.
2. Use mapStateToProps to get the whole list from redux store.
3. Apply the list getting from step 2 to UI.
4. To remove, dispatch an action to call remove api, update the list on redux store. The rest should be handled by react and redux.