javascript - Using shouldComponentUpdate to prevent jitter on rerender

Question

I have an issue with my React application when loading the next page of items. Some sections of the page load before others and some sections load with data from the previous page before quickly switching to data from the new one. The functionality works fine, but it looks a bit janky.

I have solved this issue by adding state to determine whether the component is loading the next page, and only updating it when it isn't loading.

async nextPage(){
  this.setState({isLoading: true})
  await apiCall()
  this.setState({isLoading: false})
}

shouldComponentUpdate(nextProps, nextState, nextContext) {
    return !this.state.isLoading
}

This seems like bad practice and something that could cause unrelated consequences. Is there a cleaner solution for this issue?

标签： javascriptreactjs