Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Prefer useDerivedValue Over useAnimatedReaction
impact
MEDIUM
impactDescription
cleaner code, automatic dependency tracking
tags
animation, reanimated, derived-value

Prefer useDerivedValue Over useAnimatedReaction

When deriving a shared value from another, use useDerivedValue instead of useAnimatedReaction. Derived values are declarative, automatically track dependencies, and return a value you can use directly. Animated reactions are for side effects, not derivations.

Incorrect (useAnimatedReaction for derivation):

tsx
import { useSharedValue, useAnimatedReaction } from 'react-native-reanimated'
function MyComponent() {  const progress = useSharedValue(0)  const opacity = useSharedValue(1)
  useAnimatedReaction(    () => progress.value,    (current) => {      opacity.value = 1 - current    }  )
  // ...}

Correct (useDerivedValue):

tsx
import { useSharedValue, useDerivedValue } from 'react-native-reanimated'
function MyComponent() {  const progress = useSharedValue(0)
  const opacity = useDerivedValue(() => 1 - progress.get())
  // ...}

Use useAnimatedReaction only for side effects that don't produce a value (e.g., triggering haptics, logging, calling runOnJS).

Reference: Reanimated useDerivedValue