`lazilyRender` prop to render children only when needed

[Mitgenosse]

Hello there,

we are using react-collapse to render collapsible components. We would like to increase the performance of our application by rendering big components inside the Collapse lazily (render only when it expands, is open and finished closing).

Is there a way to do this, is this a planned feature or even wanted/needed?

Greetings

[asbjornh]

This is possible already.

You can set a property in state that indicates that the collapse is animating and use Collapse's onRest callback to reset it. You could then pass this to your component and use it in the shouldComponentUpdate lifecycle method of that component

open = () => {
  this.setState({ isOpened: true, isAnimating: true });
}

close = () => {
  this.setState({ isOpened: false, isAnimating: true });
}

onRest = () => {
  this.setState({ isAnimating: false });
}

render() {
  <Collapse isOpened={this.state.isOpened} onRest={this.onRest}>
    <SomeComponent shouldUpdate={!this.state.isAnimating} />
  </Collapse>
}

If you're using UnmountClosed you might want to delay setting isAnimating until SomeComponent has rendered once because Collapse will need something to measure 🙂