If you’ve ever wondered why some React Native apps feel smooth and others feel laggy — it all comes down to how threads work.

Let me break it down simply. No jargon. Just the real stuff.

First — What is a Thread?

Think of a thread like a worker in a kitchen.

Each worker has one job. If one worker gets stuck, the whole kitchen slows down.

React Native has 3 main workers (threads):

Thread Job UI Thread Draws buttons, text, animations on screen JS Thread Runs your JavaScript / React code Native Thread Handles device features (camera, storage, etc.)

These 3 threads need to talk to each other constantly. And how they talk — that’s where everything changes.

The Old Way — The Bridge 🌉

In the old React Native architecture, all 3 threads talked through something called the Bridge.

Imagine the Bridge like a post office. Every message had to be:

1. Packed into a box (serialized to JSON)
2. Sent to the post office
3. Delivered to the other thread
4. Unpacked (deserialized)

This worked — but it was slow and heavy.

Old Architecture Example

// OLD WAY — calling a native module through the Bridge

import { NativeModules } from 'react-native';

const getUserData = async () => {
  // This call crosses the Bridge
  // JS → serialize to JSON → Bridge → deserialize → Native
  // Then Native → serialize → Bridge → deserialize → JS
  const user = await NativeModules.UserModule.getUser();
  console.log(user);
};

Every single call had to do this full round trip. If you had 5 calls on one screen — 5 round trips. Slow. Laggy. Frames dropping.

The Real Problem

// OLD WAY — scroll animation with the Bridge (bad)

import { Animated } from 'react-native';

const MyScreen = () => {
  const scrollY = new Animated.Value(0);

  const handleScroll = (event) => {
    // Every scroll event → goes to JS thread → crosses Bridge → updates UI
    // JS thread busy? Animation freezes. User sees jank. 😬
    scrollY.setValue(event.nativeEvent.contentOffset.y);
  };

  return (
    <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
      <Animated.View style={{ opacity: scrollY }} />
    </ScrollView>
  );
};

The problem here: every scroll event goes through JS → Bridge → UI. If your JS thread is doing anything else (fetching data, rendering) — your animation freezes. That’s the jank you feel.

The New Way — JSI (No Bridge!) ⚡

The new React Native architecture replaced the Bridge with JSI (JavaScript Interface).

Instead of a post office, JSI is like giving each worker a direct phone line to the others.

• No packing boxes ❌
• No post office ❌
• No waiting ❌

Just a direct call. Instant.

New Architecture Example

// NEW WAY — TurboModules with JSI (direct call, no bridge)

import { NativeModules } from 'react-native';
// TurboModules work the same way in your JS code
// but under the hood — NO Bridge, NO JSON, direct C++ call

const getUserData = async () => {
  // Direct call — no serialization, no round trip
  // Loads lazily only when you need it (faster app startup too!)
  const user = await NativeModules.UserModule.getUser();
  console.log(user);
};

Same code, but 2–3x faster under the hood. The magic happens in the native layer.

The Real Fix — Animations on UI Thread

// NEW WAY — Reanimated 2 (animation runs on UI thread directly)

import Animated, {
  useSharedValue,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  interpolate,
} from 'react-native-reanimated';

const MyScreen = () => {
  const scrollY = useSharedValue(0);

  // 'worklet' means this runs ON the UI thread
  // JS thread is not involved at all 🔥
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      'worklet';
      scrollY.value = event.contentOffset.y;
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    'worklet';
    return {
      opacity: interpolate(scrollY.value, [0, 300], [1, 0]),
    };
  });

  return (
    <Animated.ScrollView onScroll={scrollHandler}>
      <Animated.View style={animatedStyle}>
        {/* This fades smoothly even if JS thread is busy */}
      </Animated.View>
    </Animated.ScrollView>
  );
};

See that 'worklet' word? That tells React Native: run this on the UI thread, skip JS entirely. Your animation is now 60fps no matter what your JS thread is doing.

Old vs New — Side by Side

OLD ARCHITECTURE
─────────────────────────────────────────────────
JS Thread  →  Bridge (JSON)  →  Native Thread
                  ↓
           Slow. Serialized.
           Every call waits in line.

NEW ARCHITECTURE
─────────────────────────────────────────────────
JS Thread  →  JSI (Direct C++ call)  →  Native Thread
                  ↓
           Fast. Direct.
           No waiting. No packing. No unpacking.

Old (Bridge) New (JSI) Communication JSON serialization Direct C++ call Speed Slow (1–2ms per call) Near zero cost Animation Goes through JS + Bridge Runs on UI thread (worklets) Module loading All loaded at startup Lazy loaded when needed App startup Slower Faster

The One Rule to Remember

Keep the UI Thread free. Keep the JS Thread free.
If one gets blocked — your user feels it immediately.

That’s it. Everything in React Native performance comes back to this one rule.

The new architecture (JSI + Fabric + TurboModules) makes this much easier to achieve — but understanding why is what separates good mobile engineers from great ones.

I’m learning React Native architecture deeply right now and documenting everything as I go. If you’re on the same journey — let’s connect. 🙌

Drop a comment if you found this helpful or if anything wasn’t clear. Happy to explain further!

#ReactNative #MobileDevelopment #JavaScript #AndroidDev #iOSDev #SoftwareEngineering #LearningInPublic #JSI #NewArchitecture #TechCommunity