All Panels make a new render when opening/closing a Panel.

[bertho-zero]

I need to do this to avoid this behavior:

import _ from 'lodash';
import RCCollapse from 'rc-collapse';
import { shouldUpdate, shallowEqual } from 'recompose';

const Collapse = shouldUpdate(
  ( props, nextProps ) => (
    !shallowEqual( _.omit( props, 'children' ), _.omit( nextProps, 'children' ) )
    || !_.isEqual( props.children.map( v => v.key ), nextProps.children.map( v => v.key ) )
  )
)( RCCollapse );

const Panel = shouldUpdate(
  ( props, nextProps ) => !shallowEqual(
    _.omit( props, 'onItemClick' ),
    _.omit( nextProps, 'onItemClick' )
  )
)( RCCollapse.Panel );

Whether the onItemClick function changes or not does not affect the rendering, so you do not need to rerender when this prop changes.

[klauco]

Hello, I am also facing the same issue as @bertho-zero - for larger number of panels in one collapse this actually causes a significant performance hit. Any update would be highly appreciated (bow)

[bertho-zero]

@klauco The problem is that Collapse creates functions inside the render:

collapse/src/Collapse.jsx

Line 89 in 43c8806

onItemClick: disabled ? null : () => this.onClickItem(key),

collapse/src/Collapse.jsx

Line 67 in 43c8806

Children.forEach(this.props.children, (child, index) => {

Both of these methods must absolutely be instance methods (this.renderChildren and this.defaultOnClickItem).

[bertho-zero]

collapse/src/PanelContent.jsx

Lines 6 to 8 in 43c8806

	shouldComponentUpdate(nextProps) {
	return this.props.forceRender || this.props.isActive || nextProps.isActive;
	}

And this shouldComponentUpdate is bad (I think).