⚡ Worklets Demo

Interactive demonstration of React Native Worklets for performance and stress testing.

📱 About

This project demonstrates the use of Worklets in React Native, allowing JavaScript code to run on parallel threads without freezing the UI. The app includes a stress test laboratory with different scenarios to test memory isolation, heavy background processing, concurrency, and Worklets limitations.

📋 Workshop – Main Topics

1. Traditional React Native architecture
   Understanding the single-threaded model: the JS thread handles React logic, animation calculation, data processing, and gestures, then talks to the UI thread for rendering. This can cause bottlenecks and jank.

2. New architecture + react-native-worklets
   How Worklets enable multithreading: the JS thread focuses on React/state and business logic, while animations and gestures move to the UI thread.

3. UI Worklet
   Gestures and 60 fps animations run on the UI thread inside a lightweight JS runtime (UI Worklet), keeping the main JS thread free.

4. Background thread
   Heavy work (parsing, heavy calculations) runs on a dedicated background thread via Worklets, so the UI stays responsive.

5. What is a Worklet?
   A Worklet is a small piece of JavaScript that runs on a different thread (UI or background)—e.g. the callback in useAnimatedStyle with the 'worklet' directive.

6. Inter-thread communication
   Using useSharedValue() to share and sync data between the JS thread, UI Worklet, and background Worklets without blocking the UI.

🖼️ Screenshot

🚀 Technologies

• React Native
• Expo
• react-native-worklets
• react-native-reanimated

📦 Installation

yarn install

▶️ Run

# iOS
yarn ios

# Android
yarn android

# Web
yarn web