animation-performance

Fix React Native animation jank and frame drops by applying priority-ordered guidelines for Reanimated shared values, worklets, and memoization to reduce unnecessary re-renders and achieve smooth 60fps performance.

The best way to use Reanimated shared values and worklets is to follow priority-ordered guidelines covering calculations, layout, reactions, and hooks, ensuring animated styles run efficiently on the UI thread.

React Native gesture handler animation jank often occurs when shared values trigger unnecessary re-renders or heavy calculations on the JavaScript thread instead of utilizing worklets and derived values.

Reduce re-renders in complex React Native animated lists by applying memoization patterns and shared values, moving calculations to worklets, and structuring reactions to prevent UI thread blocking.

Yes, you can apply these animation performance guidelines to complex UI transitions, as they provide practical patterns for shared values, hooks, and animated styles where critical mobile performance is required.

Limitations of Reanimated worklets involve adhering to strict guidelines for calculations and layout limits, as improper use of derived values or reactions can still cause UI thread blocking and frame drops.