useSharedValue: State for High-Performance Animations
The useSharedValue hook creates state that lives on the UI thread, bypassing React's render cycle for animations. Use it with useAnimatedStyle to drive smooth, 60fps animations. The footgun: modifying a shared value won't re-render your component.
Why it exists
Standard React state (useState) triggers component re-renders, which can be too slow and choppy for smooth, 60fps animations. Animations need to update styles on every single frame, independent of the JavaScript thread's workload. useSharedValue solves this by creating and managing state directly on the more responsive UI thread.
The mental model
Think of a shared value as a remote control for a component's style. The remote's buttons (e.g., opacity.value = 0) are on the JS thread, but the TV's volume (the component's style) changes instantly on the UI thread without asking the whole house (the React component tree) to reload. This separation is the key to performance.
How it works
You initialize a value with const opacity = useSharedValue(1). This returns a plain JavaScript object with a .value property. When this object is used inside a useAnimatedStyle worklet, Reanimated tracks the dependency. Any change to opacity.value will automatically and synchronously update the connected style on the UI thread, completely bypassing React's render loop.
When to use it
Use useSharedValue as the primary state for any value that drives an animation in React Native Reanimated. It's the building block for animating positions, opacity, colors, transforms, and sizes in response to gestures or timers. All animation functions like withTiming and withSpring operate on shared values.
When not to use it
Do not use it for general application state that needs to trigger a React re-render. If changing a value should add or remove elements, or change component logic, stick with useState. Also, avoid reading a shared value's .value on the JS thread repeatedly, as this can block the thread while it waits for the value to be fetched from the UI thread.
One canonical example
To fade a component out on press, you would define a shared value: const opacity = useSharedValue(1). Then, create an animated style that uses it: const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value })). Finally, a button's onPress handler would trigger the animation: opacity.value = withTiming(0). This animates the value from 1 to 0 on the UI thread, smoothly fading the component.
Interview question
What is the primary advantage of useSharedValue over useState for animations?
- a.It ensures state changes are synchronized across all component instances.
- b.It automatically batches multiple state updates to prevent flickering.
- c.It updates styles directly on the UI thread, bypassing React's re-render cycle.Correct
- d.It simplifies the definition of complex animation sequences.
Why? this is the answer
The card states that useSharedValue creates state on the UI thread, bypassing React's render cycle to achieve smooth 60fps animations. Other options describe general animation benefits or state management features, but not the specific performance mechanism of useSharedValue.
Just read this? Test yourself on what you have been reading.
Read the original → docs.swmansion.com
- #react native
- #reanimated
- #animation
- #hooks
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles