How can ref.current never be null

thank you for reading.
I am developing a React app.

Use "IntersectionObserver" to observe multiple "ref".
Commented out "*" parts in the code will be null.
Do you know why?

const refs = useRef<RefObject<HTMLVideoElement>[]>([]);

useEffect(() => {
    const observer = new IntersectionObserver(entry => {
    });

    fetchData().then(results => {
        // set data here

        results.forEach((d, i) => refs.current[i] = createRef<HTMLVideoElement>());

        refs.current.forEach(ref => {
            console.log(ref.current);  // * 
            if (ref.current) {
                observer.observe(ref.current);
            }
        });
    }).catch(error => {
        alert("error");
    });

    return () => {
        refs.current.forEach((ref) => {
            if (ref.current) {
                observer.unobserve(ref.current)
            }
        });
    };
}, []);

By the way, "ref" instead of "ref.current" looks like the attached image.

Immediately after creating the refs, you try to use them, without ever assigning them to any element. Even if you do assign them to elements, the assignment would happen after you tried using them.

Instead use function refs to observe elements - the observer is stored in a ref. Whenever one of the observe callbacks is called, it checks if observer.current exists, and if not it initializes it. It then registers with the observer the element that used it as ref.

Don't bother cleaning individual observed elements, since the observer has weak links to the observed, so removing the elements won't cause a memory leak. Use a useEffect to terminate the observer as a cleanup measure.

In addition, now you can add more items and pass them the ref callback (observer).

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const { useRef, useCallback, useEffect } = React;

const Demo = () => {
  const observer = useRef();
  
  const observe = useCallback(el => {
    if(!observer.current) { // init the observer if needed
      observer.current = new IntersectionObserver(entry => {
        console.log(entry);
      });
    }

    observer.current.observe(el); // observe the element
  }, []);

  useEffect(() => () => { // cleanup
    observer.current.disconnect();
  }, []);
  
  return (
    <div>
      <div ref={observe}>a</div>
      <div ref={observe}>b</div>
      <div ref={observe}>c</div>
    </div>
  );
};

ReactDOM
  .createRoot(root)
  .render(<Demo />);

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

<!-- end snippet -->

You can extract this logic to a custom hook. The only change is to store the external callback function cb in a ref, so it won't be a dependency of the observe function:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const { useRef, useCallback, useEffect } = React;

const useIntersection = cb => {
  const observer = useRef();
  const fn = useRef(cb);
  
  useEffect(() => { // store the callback function in a ref
    fn.current = cb;
  });

  useEffect(() => () => { // cleanup
    observer.current.disconnect();
  }, []);
  
  return useCallback(el => {
    if(!observer.current) { // init the observer if needed
      observer.current = new IntersectionObserver(entry => {
        fn.current(entry);
      });
    }

    observer.current.observe(el); // observe the element
  }, []);
};

const Demo = () => {
  const observe = useIntersection(console.log);
  
  return (
    <div>
      <div ref={observe}>a</div>
      <div ref={observe}>b</div>
      <div ref={observe}>c</div>
    </div>
  );
};

ReactDOM
  .createRoot(root)
  .render(<Demo />);

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

<!-- end snippet -->