Animation Performance Tips

Overview

Performance optimization guide for React Native Reanimated animations, covering shared values, worklets, memoization, and rendering optimizations. These guidelines ensure buttery smooth animations at 60fps.

When to Apply

Reference these guidelines when:

• •Debugging janky or stuttering animations
• •Optimizing animation performance (FPS drops)
• •Working with shared values and worklets
• •Implementing gesture handlers
• •Optimizing animated lists and scroll handlers
• •Reviewing Reanimated code for performance issues

Priority-Ordered Guidelines

Quick Reference

Critical: Shared Values Usage

Common mistakes:

• •Reading shared values on JS thread (causes thread blocking)
• •Accessing shared values during render (violates Rules of React)
• •Using component state for animation values (triggers re-renders)

Quick fixes:

• •Read shared values only in worklets (useAnimatedStyle, useDerivedValue) - see shared-values-read-in-worklets.md
• •Access shared values in useEffect or callbacks, not during render - see shared-values-during-render.md
• •Use useSharedValue instead of useState for animation values - see re-renders-use-shared-values.md
• •Track animation state with useRef instead of reading shared values - see shared-values-track-state-with-ref.md
• •Initialize with simple values, compute complex ones in worklets - see shared-values-initialization.md

Critical: Re-renders

Common fixes:

• •Use shared values instead of component state for animations
• •Memoize animation objects outside component or with constants
• •Memoize frame callbacks with useCallback
• •Memoize gesture objects with useMemo

High: Animation Calculations

Common fixes:

• •Use useDerivedValue for expensive calculations - see calculations-use-derived-value.md
• •Avoid conditional logic in worklets - see calculations-avoid-conditionals.md
• •Use clamp instead of manual Math.min/max - see calculations-use-clamp.md
• •Batch updates with scheduleOnUI - see calculations-batch-with-schedule-on-ui.md
• •Prefer transform properties over layout properties - see layout-prefer-transform.md
• •Choose the right hook (useAnimatedProps vs useAnimatedStyle) - see hooks-choose-animated-props.md
• •Optimize useAnimatedReaction dependencies - see reactions-optimize-dependencies.md
• •Cancel animations properly before starting new ones - see animations-cancel-properly.md

References

Full documentation with code examples in references/:

Shared Values (shared-values-*)

Re-renders (re-renders-*)

Memoization (memoization-*)

Calculations (calculations-*)

Layout (layout-*)

Reactions (reactions-*)

Hooks (hooks-*)

Animations (animations-*)

Limits (limits-*)

Scroll (scroll-*)

Problem → Skill Mapping