docs / performance
Performance
Keep sheet content responsive across motion, layout changes, and long lists.
Keep changing state close to its owner
The sheet can animate independently, but expensive descendants still rerender when their props change. Keep rapidly changing form or list state in focused child components and memoize only after measurement identifies meaningful work.
Let content measurements settle
Content-sized destinations respond to layout changes. Reserve dimensions for images, avoid layout feedback loops, and prefer stable snap-point arrays when their meaning has not changed.
const snapPoints = useMemo(() => [
{ id: 'compact', value: '35%' },
{ id: 'full', value: '90%' },
], [])Virtualize where the content needs it
A sheet does not make a large list inexpensive. Use the same virtualization and pagination strategy you would use on a page, and verify that the scroll owner remains the element expected by the gesture boundary.