VisibilitySensor onChange triggers on render about react-visibility-sensor HOT 7 OPEN

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.

from react-visibility-sensor.

maybe you can filter with isVisible === true because in render, isVisible is false in my case

from react-visibility-sensor.

@JadSayegh can you tell us a little more about what you're hoping to do with this example?

from react-visibility-sensor.

This is happening to me as well.

from react-visibility-sensor.

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.

from react-visibility-sensor.

What about not updating state if the current visibility state is the same as the "new" visibility state?

class MyComponent extends Component {

   onChange = (isVisible) => {
       this.setState(prevState => {
           if (prevState.isVisible === isVisible) {
               return null
           }
           return {
               isVisible: isVisible,
               visCount: prevState.visCount + 1,
           }
       })
   }

   render(){
       return <div><VisibilitySensor onChange={this.onChange} /></div>
   }
}

from react-visibility-sensor.

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.

from react-visibility-sensor.