Reanimated Worklets: Run JS on the UI Thread
A Reanimated worklet is a JS function that runs directly on the UI thread, bypassing the bridge for 60fps animations. They're used in hooks like useAnimatedStyle to compute styles without dropping frames. The footgun: worklets capture their entire closure.
Why it exists
In React Native, your app's business logic runs on a JavaScript thread, while the UI runs on a separate, native UI thread. Communication between them over the asynchronous bridge can be a bottleneck. If the JS thread is busy, animations controlled by it will stutter. Worklets solve this by moving animation logic directly onto the UI thread.
The mental model
Think of a worklet as a small, self-contained piece of JavaScript code that you package up and send to the UI thread to run independently. It's like giving the UI thread its own mini-calculator so it doesn't have to ask the main JS thread for every small computation needed to render an animation frame.
How it works
You define a worklet by adding the 'worklet' directive at the top of a function. A Babel plugin then serializes the function and any variables it captures from its surrounding scope (its closure). This serialized object can be executed on the UI thread. Reanimated hooks like useAnimatedStyle do this automatically. You can also manually run a worklet on the UI thread with scheduleOnUI or call back to the JS thread from a worklet using scheduleOnRN.
When to use it
Use worklets for any logic that drives animations or responds to gestures. This includes calculating dynamic styles in useAnimatedStyle, deriving new shared values with useDerivedValue, or handling touch events in Gesture Handler callbacks. The goal is to keep all frame-by-frame calculations off the main JS thread.
When not to use it
Avoid putting logic inside a worklet that needs to interact with non-thread-safe code, like updating React state or calling most third-party libraries (e.g., navigation). For these tasks, use scheduleOnRN from within your worklet to dispatch the function back to the main JS thread where it can be executed safely.
One canonical example
The biggest footgun is capturing large objects in a worklet's closure. If you have a large theme object and your worklet only needs theme.color, the entire theme object is inefficiently serialized and sent to the UI thread. The correct pattern is to extract the specific value into a constant before the worklet is defined. This way, the worklet's closure only captures the small, primitive value, not the entire object.
Interview question
What is the primary reason Reanimated worklets are used for animations in React Native?
- a.To allow React state updates to be performed synchronously within animation frames.
- b.To ensure animation logic executes on the UI thread, bypassing the JavaScript bridge bottleneck.Correct
- c.To enable direct access to native device APIs from JavaScript functions.
- d.To reduce the application's memory footprint by offloading complex calculations.
Why? this is the answer
Worklets move animation logic directly to the UI thread, which bypasses the asynchronous JavaScript bridge and prevents animations from stuttering if the main JS thread is busy. Updating React state from a worklet is explicitly advised against, as it's not thread-safe.
Just read this? Test yourself on what you have been reading.
Read the original → docs.swmansion.com
- #react native
- #reanimated
- #performance
- #animation
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