1---
2title: Measuring View Dimensions
3impact: MEDIUM
4impactDescription: synchronous measurement, avoid unnecessary re-renders
5tags: layout, measurement, onLayout, useLayoutEffect
6---
7 
8## Measuring View Dimensions
9 
10Use both `useLayoutEffect` (synchronous) and `onLayout` (for updates). The sync
11measurement gives you the initial size immediately; `onLayout` keeps it current
12when the view changes. For non-primitive states, use a dispatch updater to
13compare values and avoid unnecessary re-renders.
14 
15**Height only:**
16 
17```tsx
18import { useLayoutEffect, useRef, useState } from 'react'
19import { View, LayoutChangeEvent } from 'react-native'
20 
21function MeasuredBox({ children }: { children: React.ReactNode }) {
22  const ref = useRef<View>(null)
23  const [height, setHeight] = useState<number | undefined>(undefined)
24 
25  useLayoutEffect(() => {
26    // Sync measurement on mount (RN 0.82+)
27    const rect = ref.current?.getBoundingClientRect()
28    if (rect) setHeight(rect.height)
29    // Pre-0.82: ref.current?.measure((x, y, w, h) => setHeight(h))
30  }, [])
31 
32  const onLayout = (e: LayoutChangeEvent) => {
33    setHeight(e.nativeEvent.layout.height)
34  }
35 
36  return (
37    <View ref={ref} onLayout={onLayout}>
38      {children}
39    </View>
40  )
41}
42```
43 
44**Both dimensions:**
45 
46```tsx
47import { useLayoutEffect, useRef, useState } from 'react'
48import { View, LayoutChangeEvent } from 'react-native'
49 
50type Size = { width: number; height: number }
51 
52function MeasuredBox({ children }: { children: React.ReactNode }) {
53  const ref = useRef<View>(null)
54  const [size, setSize] = useState<Size | undefined>(undefined)
55 
56  useLayoutEffect(() => {
57    const rect = ref.current?.getBoundingClientRect()
58    if (rect) setSize({ width: rect.width, height: rect.height })
59  }, [])
60 
61  const onLayout = (e: LayoutChangeEvent) => {
62    const { width, height } = e.nativeEvent.layout
63    setSize((prev) => {
64      // for non-primitive states, compare values before firing a re-render
65      if (prev?.width === width && prev?.height === height) return prev
66      return { width, height }
67    })
68  }
69 
70  return (
71    <View ref={ref} onLayout={onLayout}>
72      {children}
73    </View>
74  )
75}
76```
77 
78Use functional setState to compare—don't read state directly in the callback.
79