twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.85k stars 487 forks source link

Component isn't loaded but that component still runs and makes API calls #316

Open DavidLozzi opened 4 years ago

DavidLozzi commented 4 years ago

I am using v2.6.2 in our project. We have a component that it's wrapping that makes an API call to get some data. I have 60 instances of this component on our page, hence the need for lazy loading. I can see in the DOM the lazyload component, and as I scroll they convert to my component (really neat btw) but I also see 60 API calls being made on the network tab. Is there a way to stop these components from running?

DavidLozzi commented 4 years ago

I just read this from your README

So you can safely send request in your component's componentDidMount without worrying about performance loss

We're using useEffect in one component, but in another component we're seeing this happen we're using componentWillMount, both run their API calls.

mdedetrich commented 4 years ago

I am also getting the same problem although we are using version 3.0.0. The lazy loading is working to hide/show the components depending on the viewport however if the components inside LazyLoad happen to make API calls then these are not suspended until the component comes into view (which kind of defeats the purpose since the whole point is to delay the calls unless the user views the component).