You're on the right track, both in terms of thinking and in terms of approach.

It's correct to use an array to store the refs for elements. There are some issues though with your implementation.

When you use the useRef hook. The generic associated with the function represents the type of ref you want to represent; in react this will usually be Element, HTMLElement or some perhaps some other type assignable to one of these. If not dealing with DOM it could be anything but in your case it should be something like this. But in your implementation you are setting the generic as RefObject<HTMLDivElement>. The implementation of useRef is likely similar to function useRef<T>(initialValue: T): RefObject<T>; so the return type is already wrapped in RefObject. The generic you provide should therefore only be HTMLDivElement.

Since on first evaluation of the hook the ref could be null since the element is not rendered you, you should check for that before assigning to the ref. You can use callback refs to do this easily so in your ref assignment:

JSXCopied
<ChildComponent ref={TODO} value={value} key={value.id} />

You should check the ref is not null, something like ref={el=>el?el:undefined} if original useRef accepts undefined. Or something along those lines, depending on how you defined the ref.

When the element is changed, the ref should update if it was implemented correctly.

Your approaches are close but require minor tweaks.

Approach 1 - Precomputing the HTMLDivElement Refs

You are overcomplicating things a bit by trying to use the useEffect or useMemo hooks. You can simply compute the refs as needed, using the createRef utility for the refs you are storing in the cardsRefs.

In other words, cardsRefs is a React ref that stores an array of React.RefObject<HTMLDivElement> refs.

Refs are mutable buckets, so map the cards array to previously created refs, or create new refs as necessary.

TYPESCRIPTCopied
const cardsRefs = useRef<React.RefObject<HTMLDivElement>[]>([]);
cardsRefs.current = cards.map((_, i) => cardsRefs.current[i] || createRef());

Because you are storing an array of React refs, you not only need to access the current value of cardsRefs, but also that of any array element ref.

TYPESCRIPTCopied
cardsRefs.current[n].current?.getBoundingClientRect();
          ^^^^^^^    ^^^^^^^

Parent

TYPESCRIPTCopied
function Parent({ cards }: { cards: Cards[] }) {
  const cardsRefs = useRef<React.RefObject<HTMLDivElement>[]>([]);
  cardsRefs.current = cards.map((_, i) => cardsRefs.current[i] || createRef());

  const someCallback = () => {
    cardsRefs.current[n].current?.getBoundingClientRect();
  };

  return (
    <>
      {cards.map((value, index) => (
        <ChildComponent
          ref={cardsRefs.current[index]}
          value={value}
          key={value.id}
        />
      ))}
    </>
  );
}

Approach 2 - Using the Legacy Ref Callback Syntax

When using the legacy callback syntax the Refs can potentially be null, which is what the error informs you of.

Type 'HTMLDivElement | null' is not assignable to type 'RefObject'. Type 'null' is not assignable to type 'RefObject'

It tells you exactly what the cardsRef type needs to be, e.g. an array of HTMLDivElement | null.

TYPESCRIPTCopied
const cardsRefs = useRef<(HTMLDivElement | null)[]>([]);

The difference here is that you are not storing an array of React refs, but instead an array of references to an HTML div element, or null, so the callback access will be a bit different.

TYPESCRIPTCopied
cardsRefs.current[n]?.getBoundingClientRect();
          ^^^^^^^

Parent

TYPESCRIPTCopied
function Parent({ cards }: { cards: Cards[] }) {
  const cardsRefs = useRef<(HTMLDivElement | null)[]>([]);

  const someCallback = () => {
    cardsRefs.current[n]?.getBoundingClientRect();
  };

  return (
    <>
      {cards.map((value, index) => (
        <ChildComponent
          ref={(el) => (cardsRefs.current[index] = el)}
          value={value}
          key={value.id}
        />
      ))}
    </>
  );
}