Worklets 0.8: The Shareable — Shared Memory’s Missing Piece

TL;DR: Worklets 0.8.0 introduces the Shareable — a runtime-bound shared memory primitive that powers Reanimated’s Shared Values under the hood. Now it’s available as a lean standalone building block for your own use cases.

Sharing JavaScript memory in React Native

Sharing memory between JavaScript Runtimes in React Native is difficult. Not only do we have to overcome the limitations of the single-threaded paradigm of JavaScript, but also cover the API needs of typical React Native apps.

Today we present to you the Shareable, the last missing shared memory data type in React Native Worklets. But before we dive into the Shareable itself, let’s take a look at what exactly the other data types are.

3 types of shared memory

Since every JavaScript Runtime has its own memory space, which by design can’t be accessed from another Runtime’s memory space, we must add intermediate steps, with C++ and JSI — JavaScript Native Interface — that will create a bridge connecting these memory spaces. That way we can create an illusion that even though the memory spaces are totally disjoint, there’s some kind of link between them

We can distinguish three different types of shared memory, based on their use case:

Copy-only memory

The simplest of them all, a way to move any value from Runtime A to Runtime B as-is: a number, an object, a string, basically everything that makes sense. However, changes to such a value on any Runtime aren’t reflected in the other Runtimes. Each Runtime is unaware that it has a copy and simply treats its value as the original. This is the Serializable. Depending on the definition of shared memory, this type might not even be considered one.

Unbound memory

The first type of memory that is actually shared — meaning that changes to it on Runtime A will be seen by Runtime B and all the other Runtimes. This is achieved by keeping the actual “real” value outside of any Runtime, in C++, guarded by mutexes and other thread-safe mechanisms. Each JavaScript Runtime holds just a specific kind of reference to the C++ value. Each read or write means crossing the boundary between JavaScript and C++. Because the memory is thread-safe, each Runtime can safely access it at its own discretion. This is the Synchronizable

Runtime-bound memory

Type of asymmetric shared memory that overcomes some issues of unbound memory — operations on unbound memory are much more expensive than ones on plain JavaScript values — due to the need to cross the boundary between JavaScript and C++ with JSI on each access. Runtime-bound memory optimizes access time on a single designated JavaScript Runtime, called the Host Runtime, by simply holding the value there as a plain JavaScript value. Other Runtimes only have a specific kind of reference that “knows” that the actual value lives on another Runtime — if you want to access it with that reference, you must go to C++, obtain the Host Runtime exclusively, read the actual value, and return it all the way back to the accessor Runtime. This is the Shareable, the spotlight of today’s blogpost.

Why Shared Value wasn’t enough

The Shareable is by far the most complicated type of memory available in Worklets. You might wonder what purpose such a complicated concept could possibly serve. It turns out it has been there, in React Native, for years — this is exactly how Reanimated’s Shared Value (also called the Mutable) works. A Shared Value is a runtime-bound type of shared memory, specifically tailored for reactivity and driving animations. It lives on the UI Runtime where it’s updated and read sometimes even hundreds of times per frame in apps with a lot of animations. When you assign a new animation to it in your component, you actually schedule a call to the UI Runtime with your specific reference, where you update the value — and your animation is also copied to the UI Runtime, as a Serializable.

We wanted to go a step further with the Shared Value, expanding the possibilities of what you can do with shared memory in your apps. However, Shared Value’s close relation to animations and the UI Runtime proved to be a serious obstacle when trying to use it in a non-animation use case. This is why we had to take a step back, separate the shared memory concept from the animation logic, and expose a building block which Reanimated can take and turn into a Shared Value by adding animations to it. The same building block that you can take and do whatever you want with. This building block, the shared memory “primitive”, is the Shareable.

With React Native Worklets 0.8.0, you can freely use the Shareable in your apps, simplify some of your Shared Value use cases, and even create your own custom shared memory types by building on top of the Shareable. It’s all in your hands now, so go ahead and experiment with it!

We’re Software Mansion: multimedia experts, AI explorers, React Native core contributors, community builders, and software development consultants.