Only update when the component is visible?

[akshatmittal]

I have a component in my Next.js app which uses useSWR to periodically update the data from an endpoint. This component is very much below the fold and only about 20% of the users go that far. But the component starts updating as soon as the person lands on the page.

Is there a way I can make useSWR only update the data when the component is actually in view?

I've already looked at refreshWhenHidden flag but that does not help here.

[huozhi]

hi @akshatmittal swr doesn't listen to DOM change or visible. and the hidden in refreshWhenHidden represents the visibility of current page/browser tab instead of some specific component.

so I think you can use Intersection_Observer_API to track the visibility of your hidden component, or you know the timestamp exactly when component slides into screen. then you can call mutate() or revalidate() to update state from swr.

or you can wrap your useSWR hook in a standalone component, which only renders when your component becomes visible to users. hope this can solve part of the problem.

[akshatmittal]

The intersection observer was the second alternative to having native support in useSWR. Thanks for the information!

[bacchilu]

Consider also incapsulating that API in a hook.