VisibilitySensor onChange triggers on render

My component looks something like this

class MyComponent extends Component {
   onChange(isVisible){
       this.setState({visCount : this.state.visCount + 1}) // 
   }
   render(){
       return <div><VisibilitySensor onChange={(v)=>this.onChange(v)} /></div>
   }
}

The issue is onChange is getting triggered on every render, which then triggers another render so visCount keep auto-incrementing. Am I doing something wrong here? How are you supposed to use setState in onChange?

[JadSayegh]

Hey @joshwnj , I’m trying to use it to trigger an animation on a component (animated using javascript, with setInterval) once that component becomes visible.

I haven’t looked at the code since I posted this (gave up on the animation in the interest of deadlines), but I will take a look at it again tonight and elaborate the issue.

[williamboman]

This still seems to be affecting me on v3.10.1. onChange is getting called when component scrolls out of viewport, which triggers an action/reducer, state gets mapped to a prop, component gets rerendered… and onChange gets called with true again. After this onChange no longer gets triggered when scrolling the component in/out of the viewport.

This might be the same issue I’m having in #102. I’ve opened #103 that fixes this.