fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.3 KiB
1.3 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Prefer useDerivedValue Over useAnimatedReaction | MEDIUM | cleaner code, automatic dependency tracking | 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):
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):
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