What are Shared Values in Reanimated, and how do they differ from useState?

Short answer

Shared Values hold mutable animation data that can be accessed from both the JS and UI threads. Changing them does not trigger a React tree rerender; it updates the rendered node directly.

Explanation

Create a shared value with useSharedValue(initialValue). When sharedValue.value changes, React does not rerun the component function as it would with useState. Instead, useAnimatedStyle immediately updates the rendered property on the UI thread, supporting 120 fps without using the JS processor.

Code example

const progress = useSharedValue(0);

const handlePress = () => {
  // Smooth animated update with no re-render
  progress.value = withSpring(1);
};

Common mistakes

• Trying to read or write sharedValue.value directly during the component function's render phase.

Follow-up questions

• How do you combine React Native Gesture Handler (RNGH) with Reanimated for immediate touch gesture interactions?
• What are shared element transitions between screens, and how do you implement them?

Sources

• Reanimated docs — useSharedValue