I have a component that renders a dynamic list of elements. I need to know the size of each element after it is rendered, for animation purposes. So I create dynamic array of refs:
const questionRefs = useRef<HTMLDivElement[]>([])
In return, I fill the array with values. Custom component of course uses forwardRef:
...
<QuestionnaireItem
ref={(el: HTMLDivElement) => (questionRefs.current[i] = el)}
/>
...
But then when in useEffect or useLayoutEffect when I try to get ref sizes with getBoundingClientRect it returns me some values that are not true, for example 43px instead of 32px. Such a filling that it measures the size before the CSS is applied.
How do I get the actual element sizes?