fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.2 KiB
2.2 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Measuring View Dimensions | MEDIUM | synchronous measurement, avoid unnecessary re-renders | layout, measurement, onLayout, useLayoutEffect |
Measuring View Dimensions
Use both useLayoutEffect (synchronous) and onLayout (for updates). The sync
measurement gives you the initial size immediately; onLayout keeps it current
when the view changes. For non-primitive states, use a dispatch updater to
compare values and avoid unnecessary re-renders.
Height only:
import { useLayoutEffect, useRef, useState } from 'react';
import { View, LayoutChangeEvent } from 'react-native';
function MeasuredBox({ children }: { children: React.ReactNode }) {
const ref = useRef<View>(null);
const [height, setHeight] = useState<number | undefined>(undefined);
useLayoutEffect(() => {
// Sync measurement on mount (RN 0.82+)
const rect = ref.current?.getBoundingClientRect();
if (rect) setHeight(rect.height);
// Pre-0.82: ref.current?.measure((x, y, w, h) => setHeight(h))
}, []);
const onLayout = (e: LayoutChangeEvent) => {
setHeight(e.nativeEvent.layout.height);
};
return (
<View ref={ref} onLayout={onLayout}>
{children}
</View>
);
}
Both dimensions:
import { useLayoutEffect, useRef, useState } from 'react';
import { View, LayoutChangeEvent } from 'react-native';
type Size = { width: number; height: number };
function MeasuredBox({ children }: { children: React.ReactNode }) {
const ref = useRef<View>(null);
const [size, setSize] = useState<Size | undefined>(undefined);
useLayoutEffect(() => {
const rect = ref.current?.getBoundingClientRect();
if (rect) setSize({ width: rect.width, height: rect.height });
}, []);
const onLayout = (e: LayoutChangeEvent) => {
const { width, height } = e.nativeEvent.layout;
setSize((prev) => {
// for non-primitive states, compare values before firing a re-render
if (prev?.width === width && prev?.height === height) return prev;
return { width, height };
});
};
return (
<View ref={ref} onLayout={onLayout}>
{children}
</View>
);
}
Use functional setState to compare—don't read state directly in the callback.