Hice un gancho para intersection observer pero devuelve el estado como false en el renderizado inicial y luego devuelve verdadero. mi elemento es 100% visible para el observador, pero no sé por qué devuelve false en el renderizado inicial. Alguna forma de resolver esto ?

Aplicación.js:

 import React from "react"; import "./App.css"; import useIntersectionObserver from "./hooks/useIntersectionObserver"; const App = () => { const Ref = React.useRef(null); const { observer, state } = useIntersectionObserver({ rootMargin: "10px" }); React.useEffect(() => { observer.observe(Ref.current); console.log(state); }, [observer, state]); return ( <> <h1 ref={Ref}>Hello World</h1> <h3>Text</h3> </> ); }; export default App;

gancho personalizado useIntersectionObserver :

 import React from "react"; const useIntersectionObserver = ({ options }) => { const [state, setState] = React.useState(false); function callbackfn(entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { setState(true); } else { setState(false); } }); } const observer = new IntersectionObserver(callbackfn, options); return { observer, state }; }; export default useIntersectionObserver;

te dará esto, en la consola: