--- title: "What and why and how are worklets in Reanimated 2?" url: "https://www.bekk.christmas/post/2020/07/what-and-why-and-how-are-worklets-in-reanimated-2" authors: ["Hannes Waller"] published: "2020-12-07" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["React"] --- # What and why and how are worklets in Reanimated 2? A brief introduction to Reanimated 2's worklet directive and how it can help us animate our apps. ## In short Worklets in Reanimated 2 are JavaScript functions that are compiled at runtime and run on a separate JS context on the UI thread, which makes it easier to write animations in plain JS without giving up performance. They can be used for custom animation logic and helper functions, and they can also call other worklets and share data between them. - **For:** React Native developers using or considering Reanimated 2 - **Good to know beforehand:** Basic familiarity with React Native and Reanimated _AI-generated_ Reanimated has been part of the React Native ecosystem for quite some time. Popular libraries like React Navigation depend on it. What it does is it gives developers the opportunity to write and run animations on the UI-thread, making the dream of a constant 60 fps not too distant at all. The downside of Reanimated is its quite difficult-to-learn API. For instance, a simple calculation like 10 + 8 * 4 would be written as `add(10, multiply(8, 4))` , and to be frank that is a fairly straight forward example. But this is all about to change with [version 2](https://docs.swmansion.com/react-native-reanimated/) of Reanimated, currently in its first release candidate. In this version you write JavaScript. But fear not in regards of performance, the brilliant people of at Software Mansion, who are developing this, has granted us our very our JavaScript context on the UI thread to make sure that we won't be affected by potential obstacles our "normal" JS-code might be throwing out there. Other than us being able to write our animations in JS and with a very slick new API, we are also introduced to a few new concepts within the Reanimated sphere. One of these concepts being _worklets_. ## Worklets, you say? Really, a worklet is a JS function we define in our code that that gets compiled at runtime to be executed on its own JS-thread, far and away from React Natives own one. Defining a worklet is as easy as using the "worklet" directive when writing a function, like so: ``` function myWorklet() { "worklet" // do cool stuff } ``` Let us pretend for a second that we have an animation that we want to clamp as it's raging all over the place. And we decide that this is a perfect use-case for a worklet. We could make a rather naïve version that looks like this: ``` function clamp(min: number, max: number, val: number) { "worklet" if (val <= min) return min else if (val >= max) return max else return val } ``` And to use this in our animation we write: ``` const clampedAnimationValue = clamp(val, 0, 10) ``` You might not use worklets too frequently while writing Reanimated 2, as quite a lot can be achieved within the [hooks](https://docs.swmansion.com/react-native-reanimated/docs/api/useSharedValue/) provided by the library itself. Software Mansion themselves even mentions this [here](https://docs.swmansion.com/react-native-reanimated/docs/worklets#using-hooks). However, there are definitely use-cases for when to use them and I've found myself to write a fair few of them while developing apps. Now we'll have a little peek into [William Candillon's](https://twitter.com/wcandillon) amazing toolbelt for Reanimated: [Redash](https://github.com/wcandillon/react-native-redash), which I can't recommend enough by the way. Here we'll see a fair few examples of worklets to make our day a little easier: ``` export function toDeg(rad: number) { "worklet" return (rad * 180) / Math.PI } ``` This is just a neat little function to convert radians, which you might be used to work with if you've previously been using Reanimated 1, into degrees. And again, the upside here is that we do write JS as we usually do, but it runs on a separate thread. Or we can take a look at a slightly more advanced example: ``` export const interpolateColor = ( value: number, inputRange: number[], rawOutputRange: string[], colorSpace: ColorSpace = ColorSpace.RGB ) => { "worklet"; const outputRange = rawOutputRange.map((c) => typeof c === "number" ? c : processColor(c) ); if (colorSpace === ColorSpace.HSV) { return interpolateColorsHSV(value, inputRange, outputRange); } const result = interpolateColorsRGB(value, inputRange, outputRange); return result; }; ``` Here we interpolate colours. I'm not going to go through the entire thing, but [you can](https://github.com/wcandillon/react-native-redash/blob/master/src/Colors.ts) if you want to. But the three things worth noting are the `processColor`, `interpolateColorsHSV` and `interpolateColorsRGB` functions, as these are in fact also worklets. Meaning that worklets can depend on each other and share information between one another. In conclusion, worklets are neat little helper functions to assist you while animating in Reanimated 2, without having to worry too much about performance. Granted, it's not bullet proof, but his way harder to mess up here than in regular JavaScript country. Finally, with Reanimated 2, the verbose way of writing animations is long gone and the learning curve to implement awesome interactions has never been lower. Go ahead, give it a try, I can almost guarantee you won't regret it. ## Relevant resources recommended by the author - [Reanimated documentation](https://docs.swmansion.com/react-native-reanimated/) - [React Native Redash](https://wcandillon.gitbook.io/redash/)