For when you otherwise would try multiple dynamic refs.

Child.js

import {useLayoutEffect, useRef} from 'react';

export default ({onChange}) => {
  const myRef = useRef();
  
  const updatePosition = () => {
    const rect = myRef.current.getBoundingClientRect();
    onChange(rect);
  };
  
  useLayoutEffect(() => {
    window.addEventlistener('scroll', updatePosition);
    window.addEventlistener('resize', updatePosition);
    
    return () => {
      window.removeEventlistener('scroll', updatePosition);
      window.removeEventlistener('resize', updatePosition);
    };
  }, []);
  
  return <div ref={myRef} />
}

Parent.js

import {useRef} from 'react';
import Child from './Child';

export default () => {
   const tempStore = useRef([]);
   
   const debouncedOrThrottledFunction = () => {
      const positions = [...tempStore.current];
      tempStore.current = [];
      
      // do something with the collection of positions
   }
   
   const handleChildUpdate = position => {
     tempStore.current.push(position);
      
     debouncedOrThrottledFunction()
   }

  return (
    <>
      {arrayOfSomeSort.map(child => (
        <Child onChange={handleChildUpdate}  />
      ))}
    </>
   );
};