Lazyload feature

[vodanh109]

Currently, every time the slide init, all the React Component will be mounted. I write the log on componentDidMount event to see that

Your library provide a VirtualList options, but if I set it as true, then whenever I swipe, it will re-render the component again, jumping to componentDidMount, but if I set it as false, then it will not re-render

I need the feature to render the slide only whenever this slide is visible
Thanks

[g787543]

Hi, @vodanh109

Can you give me your code or more detailed description?
I am not sure what you want.
Sorry

[vodanh109]

This is my code. It's so simple. As I said, in the component IndexInfo, it will go to componentDidMount. But different behavior when I set the value of VirtualList

Anyway, I already handled it by checking that 1 IndexInfo is off screen or not, and then load the content just when it's on screen

          prevArrow={<Icon name='angle left' />}
          nextArrow={<Icon name='angle right' />}
          arrows={this.state.arrows}
          slidesToShow={this.state.slidesToShow}
          overScan={1}
          onSwipe={this.onSwipe}>
          {this.props.indexList.map((item, index) =>
            <IndexInfo symbolInfo={item} key={index} />
          )}
        </Slider>`