Как последовательно обновлять каждый компонент в длинном списке, когда изменяется состояние редукции?

Question

У меня есть длинный список компонентов кнопок, которые меняют свое событие и стиль onClick при обновлении моего логического состояния с избыточностью.

ClickHandler, который обновляет состояние, занимает больше времени, тем больше компонентов в списке, и компоненты не обновляются до тех пор, пока не пройдут все компоненты.

Похоже, что это связано с повторным рендерингом каждого компонента кнопки.

Я посмотрел в React.Lazy и intersectionObserver, чтобы попытаться перерисовать только компоненты, близкие к представлению, но я не уверен, что это правильный способ исправить это.

Это выглядит примерно так:

List.tsx:

const mapStateToProps = ({ elements }: ApplicationState) => ({
  elements: elements.elements
})

interface ListProps {
  elements: Element[]
}

class List extends React.Component<ListProps> {

  render(){
    const { elements, selectActive } = this.props;
    return(
      <div>
        {elements.map(element => {
          let list = [];
          list.push(
            <ElementBtn 
              key={element.id}
              id={element.id}
              selectActive={selectActive}
            />
          )
          return list
        })}
      </div>
    )
  }
}

export default connect(
  mapStateToProps,
  null
)(List)

ElementBtn.tsx:

interface ElementBtnProps {
  elementId: number
  selectActive: boolean
}

interface PropsFromState {
  element: Element
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  openModal: (element: Element) => dispatch(openModal(element)),
  select: (receipt: Receipt) => dispatch(select(receipt))
})

// Using reselect to get element by Id
const makeMapStateToProps = () => {
  const getElementState = makeGetElementState()
  const mapStateToProps = (state: any, props: any) => {
    return {
      element: getElementState(state, props)
    }
  }
  return mapStateToProps
}

class ElementBtn extends React.Component<ElementBtnProps & PropsFromState> {

  openModal = () => {
    this.props.openModal(this.props.element)
  }

  select = () => {
    if (this.props.selected) {
      this.props.deselect(this.props.receipt)
    } else {
      this.props.select(this.props.receipt)
    }
  }

  render(){
    const { elements, selectActive } = this.props;
    return(
      <div onClick={selectActive ? this.select : this.openModal}>
        <div style={selectActive ? { borderColor: '#32fcb3' } : {}}>
        </div>
      </div>
    )
  }
}
export default connect(
  makeMapStateToProps,
  mapDispatchToProps
)(ElementBtn)

Я хочу, чтобы обработчик кликов не задерживался, а каждый компонент обновлялся последовательно.

Интересно, есть ли способ повторной визуализации каждого компонента, не дожидаясь обновления всех компонентов.