We have been trying to display component on the bottom of the page (sticky action bar), if certain components are not in view (using intersection observer). Suddenly, the page started flickering.

This is our onScreen hook:

   const useOnScreen = (options, targetRef) => {
    const [isVisible, setIsVisible] = useState(false)    

    const callbackFunction = (entries) => {
        const [entry] = entries
        setIsVisible(entry.isIntersecting)
    }

    const optionsMemo = useMemo(() => {
        return options
    }, [options])

    useEffect(() => {
        const observer = new IntersectionObserver(callbackFunction, optionsMemo)
        const currentTarget = targetRef.current

        if (currentTarget) observer.observe(currentTarget)

        return () => {
            if (currentTarget) observer.unobserve(currentTarget)
        }
    }, [targetRef, optionsMemo])

    return isVisible
}

And we're using it like following in components:

const isVisible = useOnScreen({root: null, rootMargin: '0px', threshold: 0}, targetRef)

And since we need it in parent component, to conditionally render another one, we're saving it to global Recoil state:

 // Setting isHeroVisible state to global state
    useEffect(() => {
        setIsHeroVisible(isVisible)
    }, [isVisible])

This is how it's used on the main page:

 const isOpenModal = useRecoilValue(notifyMeAtom)
 const isHeroVisible = useRecoilValue(isHeroVisibleAtom)
 const isFooterVisible = useRecoilValue(isFooterVisibleAtom)

    // StickyCTA should be visible only if none of refs are on screen
    const shouldDisplayCTA = !isHeroVisible && !isFooterVisible && !isOpenModal

    return shouldDisplayCTA && <StickyCTA />

We debugged the app and thought the whole page was re-rendering, but it wasn't (there are no any network or other changes). What we did notice were the fonts being re-fetched when component appeared, as can be seen on screenshot below:

Also another thing we noticed is that when component enters the DOM, some of the classnames are being updated (at the moment when state changes in useOnScreen hook). We are using styled components.