Why dosen’t the code inside useEffect execute every time the reference added as its second argument changes?

I am using a flatlist to generate some videos (which are rendered using their own seprate component). Every time a video goes out of the viewport I’m trying to pause the specific video. (using expo video in this case). I do this using viewabilityConfig and onViewableItemsChanged props in the flatlist options.

Code in flatlist component:

const pauseRef = useRef(0);

 onViewableItemsChanged = {

        pauseRef.current = pauseRef.current + 1;

Every time the list would be scrolled through I noticed that the pauseRef.current changes and increments by 1. So I’ve set up a useEffect in the Video component so that every time the value of pauseRef is incremented, the pause video code is executed.

Code in Video component:

  useEffect(() => {
    console.log("attempting to pause")

Also here’s the video component itself

                                source= {mediaSource}
                                resizeMode = "contain"

What I’ve noticed is that this setup is capable of pausing videos. But it does not seem to work every time. I can see the ref value being changed with every item change but useEffect only gets executed occasionally (and seemingly randomly). Usually when the user just begins to scroll the list.

I tried executing vid.current.pauseAsync() directly in onViewableItemsChanged but that doesn’t seem to work as all as the ref for the video is in the video component and not the flatlist one.

Source: React – Stack Overflow

November 27, 2021
Category : News
Tags: expo | react hooks | react native | reactjs | use-effect

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.