54 lines
1.3 KiB
Markdown
54 lines
1.3 KiB
Markdown
---
|
|
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](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue)
|