Beyond the Re-Render: Engineering Signal-Based Reactivity in High-Performance Expo Apps

I’ve spent the better part of the last decade squeezing performance out of React Native. We’ve all been there: you’re building a complex dashboard or a real-time telemetry feed in Expo, and suddenly, your frame rate drops. You start sprinkling useMemo and useCallback like holy water, but the core issue remains—React's reconciliation model is a top-down bottleneck for high-frequency data.

Recently, I’ve moved away from the 'standard' state management patterns for my performance-critical views. The breakthrough? Signals.

The Problem: The V-Sync Struggle

In a typical React Native app, when a piece of state changes, the component (and potentially its children) re-renders. React produces a new element tree, diffs it, and sends commands over the bridge (or via JSI) to update the native views.

When you're dealing with a sensor stream or a high-speed stock ticker, doing this 60 times a second is expensive. Even with the New Architecture (Fabric), the overhead of the React lifecycle can eat into your frame budget. I found myself asking: Why am I re-rendering an entire component just to change a single text value?

The Breakthrough: Fine-Grained Reactivity

Signals change the mental model. Instead of a component 'consuming' state, the signal 'targets' a specific node in the UI. When the signal's value changes, it updates the view directly, bypassing the React reconciliation process entirely for that update.

In my recent Expo projects, I’ve been using @preact/signals-react. It’s lightweight and integrates surprisingly well with the React Native runtime.

Implementing Signals in Expo

Here is a pattern I’ve been using to handle a high-frequency data stream—think of a GPS coordinate display or a real-time heart rate monitor.

import { signal } from "@preact/signals-react";
import { Text, View, StyleSheet } from "react-native";

// 1. Define the signal outside the component lifecycle
const sensorData = signal(0);

// Simulate a high-frequency data stream (e.g., from an Expo Sensor)
setInterval(() => {
  sensorData.value = Math.random() * 100;
}, 16); // ~60fps

export default function HighPerformanceScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Real-time Feed:</Text>
      {/* 
        2. In 'Signals' mode, we pass the signal directly. 
        The component itself DOES NOT re-render when sensorData changes.
      */}
      <Text style={styles.value}>
        {sensorData}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  label: { fontSize: 18, color: '#666' },
  value: { fontSize: 42, fontWeight: 'bold' }
});

Why This Works for Us

When you run the profiler on this, you'll notice something beautiful: HighPerformanceScreen renders exactly once. The updates to the Text component happen via a direct subscription. By avoiding the diffing of the virtual DOM, I’ve seen my JS thread load drop by as much as 40% in data-heavy views.

Bridging Signals with Reanimated

One of my biggest challenges was making signals play nice with react-native-reanimated. Since Reanimated runs on the UI thread and signals (typically) live on the JS thread, you have to be intentional.

I’ve found that using signals as the "source of truth" for business logic and then syncing them to a SharedValue only when an animation is triggered provides the best of both worlds: fine-grained UI updates for text/data and hardware-accelerated animations for movement.

Lessons from the Trenches

If you're going to try this in your next Expo project, keep these three things in mind:

1. Don't over-signal: Use them for high-frequency updates. For standard navigation or form state, standard useState or Zustand is still perfectly fine and more predictable for most teams.
2. Debugging is different: Traditional React DevTools won't show you why a signal-based value changed, because the component didn't re-render. You'll need to rely more on logging within the signal's .subscribe method.
3. The Ecosystem is Catching Up: We're seeing a massive shift. With the advent of the React Compiler (React Forget), some of these manual optimizations might become obsolete, but for now, signals provide a level of surgical precision that the compiler can't yet match in a React Native environment.

Wrapping Up

Moving "Beyond the Re-render" isn't about abandoning React; it's about knowing when the tool is working against the hardware. In the high-stakes world of mobile performance, signals are the most potent weapon I've added to my arsenal this year. If you're building in Expo and feeling the lag, it might be time to stop re-rendering and start signaling.