In this lesson, you will learn how to use developer tools to detect and eliminate recursive style recalculations that occur during complex animations.
What is Layout Thrashing?
"Layout thrashing" happens when you update an element's style in a way that forces the React Native engine to recalculate the positions and sizes of not just that element, but its siblings and parents, repeatedly in a single frame. This usually occurs when state updates trigger style changes inside an animation loop, causing the layout engine to work overtime.
Detecting Thrashing with the Profiler
To identify this, open the React DevTools and use the Profiler. Look for components that are re-rendering rapidly during an animation. If you see your component tree flashing different colors or showing a high number of commits while an animation is running, you likely have a thrashing issue.
A common culprit is updating layout-affecting properties (like width, height, margin, or padding) inside useAnimatedStyle or an animation callback.
// Avoid this: Thrashing occurs because layout changes
// force sibling components to shift their positions every frame.
const animatedStyle = useAnimatedStyle(() => {
return {
width: withTiming(isExpanded ? 300 : 100),
};
});
Eliminating the Thrash
Instead of animating properties that affect the layout (which triggers a "reflow"), animate properties that the GPU can handle directly without recalculating the document structure. Use transform properties like scale, rotate, or translateX.
If you must change size, consider using LayoutAnimation or ensuring that your component is wrapped in a View with absolute positioning, which removes it from the standard document flow so its changes don't force parent recalculations:
// Better: Transforming scale doesn't trigger a layout reflow.
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ scale: withTiming(isExpanded ? 1.5 : 1) }],
};
});
By moving away from layout-heavy properties, you keep your animation thread clear and prevent the "jank" associated with constant, recursive style recalculations.
Key Takeaway: To stop layout thrashing, animate properties that affect the GPU—like transforms—rather than properties that force the UI to recalculate its geometry, such as width, height, or margins.