Intentamos mostrar el componente en la parte inferior de la página (barra de acción fija), si ciertos componentes no están a la vue (usando el observador de intersección). De repente, la página comenzó a parpadear.

Este es nuestro enlace en pantalla:

 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
}

Y lo estamos usando como sigue en componentes:

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

Y dado que lo necesitamos en el componente principal, para renderizar condicionalmente otro, lo guardamos en el estado Recoil global:

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

Así es como se usa en la página principal:

 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 />

Depuramos la aplicación y pensamos que toda la página se estaba volviendo a representar, pero no fue así (no hay ninguna red ni otros cambios). Lo que notamos fue que las fuentes se recuperaron cuando apareció el componente, como se puede ver en la siguiente captura de pantalla:

También otra cosa que notamos es que cuando el componente ingresa al DOM, algunos de los nombres de clase se actualizan (en el momento en que cambia el estado en useOnScreen hook). Estamos usando componentes con estilo.