Stop Recreating Style Objects on Every Render

Insight

In React Native, any inline object—especially style objects—gets a new reference on each render. Since StyleSheet.create returns a static reference, developers often forget that { backgroundColor: theme } inside JSX forces child components to think their props changed, triggering extra layout passes. This hidden cost shows up as jank on low‑end devices.

Example

import { useMemo } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Card({ theme }: { theme: string }) {
  const containerStyle = useMemo(
    () => ({ backgroundColor: theme, padding: 12 }),
    [theme]
  );

  return (
    <View style={[styles.base, containerStyle]}>
      <Text>Styled Card</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  base: { borderRadius: 8, margin: 8 },
});

Takeaway

Memoize dynamic style objects (or move them to StyleSheet.create) so their reference stays stable. This simple change can cut unnecessary renders and keep your UI buttery smooth, especially on Android devices with limited GPU bandwidth.