Estoy tratando de desplazarme a un elemento cuando aparece a la vista. El problema es que solo funciona en una recarga cuando ya está a la vista.

Intenté depurarlo, pero la referencia parece ser correcta y los condicionales pasan. No hay retorno o mensaje de error, así que no sé cómo depurar esto más.

El gancho funciona como debería, así que realmente estoy luchando por descubrir cuál es la causa...

Necesito poner esto en usoEffect más adelante, pero incluso esta configuración básica no funciona. ¡Cualquier ayuda es muy apreciada!

EDITAR: necesito colocar esto en el centro de la pantalla para poder adelantar el desplazamiento y animar el elemento en el desplazamiento. Si ya inicio esa funcionalidad sin que esté centrada, se mantendrá en la parte inferior de la pantalla mientras se anima.

este es el componente

 const Component = () => { const sectionRef = useRef<HTMLDivElement>(null); const isOnScreen = useOnScreen(sectionRef); if (isOnScreen && sectionRef?.current) { sectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest'}); } return ( <section ref={sectionRef}> // ...child components </section> ) } export default Component

este es el gancho

 import { useEffect, useState, useRef, RefObject } from 'react'; export default function useOnScreen(ref: RefObject<HTMLElement>) { const observerRef = useRef<IntersectionObserver | null>(null); const [isOnScreen, setIsOnScreen] = useState(false); useEffect(() => { observerRef.current = new IntersectionObserver(([entry]) => setIsOnScreen(entry.isIntersecting) ); }, []); useEffect(() => { if (ref.current) { observerRef.current?.observe(ref.current); } return () => { observerRef.current?.disconnect(); }; }, [ref]); return isOnScreen; }