реагирует и запускается v4 задержка свертывания для рендеринга компонента

Question

Я использую React и bootstrap 4 для создания разборного div. Внутри этого div у меня есть другой компонент React, например:

Componenta

<a name={name}
    className={'btn btn-primary'}
    data-toggle={'collapse'}
    href={'#collapseId'}
    role={'button'} aria-expanded={'false'}
    aria-controls={'collapseId'}>
    collapse
</a>
<div id='collapseId'>
    <ComponentB/>
</div>

Это работает правильно, но когда я рендерил ComponentA несколько раз (мне нужно рендерить его более 20 раз), у меня возникают проблемы с производительностью, потому что ComponentB включает в себя множество элементов div и кнопок.

Итак, что я хочу сделать, это сделать условно рендеринг ComponentB, но сохранить переходы коллапса при загрузке.

Теперь, если я хочу сделать условный рендеринг, я делаю это:

constructor(props){
    super(props);

    this.state={collapsed=true}
}

conditionalRender(e){
    this.setState(prevState => this.state.collapsed = !prevState.collapsed)
}

А затем в функции рендеринга:

<a name={name}
    className={'btn btn-primary'}
    data-toggle={'collapse'}
    href={'#collapseId'}
    role={'button'} aria-expanded={'false'}
    aria-controls={'collapseId'}
    onClick={(e)=>this.conditionalRender(e)}>
    collapse
</a>
<div id='collapseId'>
    {!this.state.collapsed &&
    <ComponentB/>
    }
</div>

И это работает, НО переход медленный, не плавный и выглядит не очень хорошо.

Есть ли способ задержать переход свернутого перехода, чтобы он работал и был плавным? Я видел некоторые переопределения для перехода CSS, но опять же, не текучие. Другой допустимый вариант - использовать функцию обратного вызова setState для выполнения функций привязки по умолчанию, но я не знаю, как это сделать.

bootstrap 4.1
react 16.4.2