Streaming accelerometer data without bridge overload

WHAT THIS TESTS Whether you recognize that a sensor emitting at high frequency will saturate the JS bridge and the React render loop, and that the cure is to keep per-frame work off the JS thread.

A GOOD ANSWER COVERS The primary bottleneck is twofold: the asynchronous bridge serializing hundreds of samples per second from native to JS, and React re-rendering the component on every sample if you naively push each into state. Both starve the JS thread and drop frames. The architecture should minimize and offload. First, reduce the data rate: set the sensor's update interval sensibly and downsample or throttle. Second, move the per-frame work off the JS thread: with Reanimated you read the sensor through its sensor API or feed values into shared values and compute the visual in a useAnimatedStyle worklet, so the UI updates on the UI thread without JS round trips or re-renders. Alternatively, do filtering and aggregation natively and emit only summarized events. You reserve React state for low-frequency, meaningful changes, not raw samples. This keeps the animation smooth even while the JS thread does other work.

COMMON WRONG ANSWERS Calling setState on every accelerometer reading, causing a re-render storm. Letting all raw samples cross the bridge untouched. Trying to fix jank purely by memoizing components while still re-rendering per sample. Animating with the legacy Animated API plus JS event handling, which still hits the bridge each frame. Ignoring the sensor's configurable sampling rate.

LIKELY FOLLOW-UPS How do shared values avoid re-renders, how would the new architecture and JSI change the bridge picture, when do you push filtering into native code, and how do you decide a sampling rate.

ONE CONCRETE EXAMPLE A bubble level that tilts with the device: instead of subscribing in JS and setState-ing each reading, you write the accelerometer values into Reanimated shared values (or use its useAnimatedSensor), then a useAnimatedStyle worklet maps tilt to a transform on the UI thread. The indicator tracks motion at 60 frames per second with zero React re-renders, and only a derived event, like crossing a threshold, is sent to JS to update visible state.