Invoke custom hook after the component is mounted

Question

I'm trying to use useObserver hook to make endless pagination but when I pass first parameter which is the loader I get an error "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'." because I render this element conditionally. Here is my code:

//At first I fetch data from external API
const lastElement = useRef();

useObserver(lastElement, callback, dependecies)

return (
<section>
{here is mapping of data}
 {!loading && !isSearched && limit <= data.length && (
          <div ref={lastElement}><Loader/></div>
 )}
</section>

useObserver.js

export default function useObserver(ref, callback, dependecies) {
    const observer = useRef();

    useEffect(() => {
       function observerCallback(entries) {
           if(entries[0].isIntersecting) {
              callback()
           }
       }
   
      observer.current = new IntersectionObserver(observerCallback);
      observer.current.observe(ref?.current);
   
      return () => {
        observer.current.disconnect();
      }
     }, [dependecies])
}

How can I invoke this hook after the page is mounted, is there a way?

Does the error occur as soon as loading finishes and the `lastElement` div is removed/before loading even starts? — DustInComp, Jul 24 '23 at 12:26
@DustInComp Thank you so much for your help! Right dependecies and not attaching the observer to div in the hook solved the issue. — Lilly, Jul 24 '23 at 13:10

score 1 · Accepted Answer · answered Jul 24 '23 at 12:31

Have you tried moving the rendering condition into the div, so it's always rendered and only the loader is conditional?

return (
  <section>
    {here is mapping of data}
    <div ref={lastElement}>
      {!loading && !isSearched && limit <= data.length && (
        <Loader/>
      )}
    </div>
  </section>
)

or, alternatively, not attaching the observer if the div is not present:

export default function useObserver(ref, callback, dependecies) {
  // ...
  useEffect(() => {
    if (!ref.current) return // no action taken & no cleanup callback
    // ...
  }, [dependecies])
}

You may also not want to wrap `dependencies` in another array when passing them to `useEffect` — DustInComp, Jul 24 '23 at 12:37

Invoke custom hook after the component is mounted

1 Answers1