Worklet

Also called Worklets

Part of
React Native Glossary
Related
ReanimatedUI Thread (Main Thread)JavaScript ThreadAnimated Component
Mentioned in
Event LoopuseAnimatedStyle
Updated

What is Worklet in React Native?

A worklet is a small JavaScript function marked to run on the UI thread instead of the JavaScript thread, so animations and gestures stay smooth while JS is busy.

JS runtimeuseAnimatedStyle(() => { 'worklet'; return { opacity: progress.value }})UI runtimeprogress.valueuseAnimatedStyle(() => { 'worklet'; return { opacity: progress.value }})
The worklet, on the UI runtimeRuntimeJS thread busyA worklet is a small JavaScript function marked 'worklet' (inside useAnimatedStyle the Reanimated Babel plugin adds it for you). It is copied into a separate UI runtime and runs there every frame, reading shared values, so the animation keeps going while the JavaScript thread is busy. The trade-off is isolation: it can only use values captured from its scope and shared values, and calling back into normal JavaScript goes through runOnJS, which waits for the JS thread.

A worklet is a JavaScript function that has been marked to run on the UI thread rather than the main JavaScript thread. It is the core idea behind Reanimated.

You mark one with the 'worklet' directive, though in practice the Babel plugin adds it for you inside hooks like useAnimatedStyle:

const style = useAnimatedStyle(() => {
  'worklet';
  return { opacity: progress.value };
});

Because the worklet executes on the UI thread, it can compute a new style every frame even while JavaScript is blocked parsing a large API response. That is why a Reanimated gesture keeps tracking your finger when a setState-driven animation would freeze.

The trade-off is isolation: a worklet runs in a separate context, so it can only use values explicitly captured from the enclosing scope, plus shared values. Calling back into normal JS needs runOnJS. See the Reanimated glossary.