1---
2title: Use Callback Ref for Measurement
3impact: MEDIUM
4tags: container, ref, callback
5---
6 
7## Use Callback Ref for Measurement
8 
9Use a callback ref (not useRef) for measurement hooks so the observer attaches when the DOM node is ready.
10 
11**Incorrect (useRef may be null on first effect):**
12 
13```tsx
14const ref = useRef(null);
15useEffect(() => {
16  if (!ref.current) return;
17  observer.observe(ref.current);
18}, []);
19```
20 
21**Correct (callback ref guarantees node):**
22 
23```tsx
24const [element, setElement] = useState(null);
25const ref = useCallback((node) => setElement(node), []);
26useEffect(() => {
27  if (!element) return;
28  observer.observe(element);
29  return () => observer.disconnect();
30}, [element]);
31```
32