DEV Community: Sankalan Dasgupta

Implementing Progress Bars in Angular and React: A Comprehensive Guide

Sankalan Dasgupta — Mon, 14 Apr 2025 06:24:44 +0000

In today's web applications, providing visual feedback to users during operations is essential for a positive user experience. Progress bars are one of the most effective UI elements for communicating the status of operations like file uploads, form submissions, or data processing. They reduce perceived wait times and keep users informed about what's happening behind the scenes.

In this article, I'll share practical implementations for both frameworks and discuss the architectural approaches that make each unique.

Understanding Progress Bar Requirements

Before diving into code, let's define what makes an effective progress bar:

Visual representation - A clear indicator of completion percentage
Animation - Smooth transitions between states
Accessibility - Proper ARIA attributes for screen readers
Configurability - Customizable appearance and behavior
Responsiveness - Works across different screen sizes

Implementation in React

React's component-based architecture with hooks provides a clean way to implement progress bars. Here's a complete implementation:

import { useEffect, useState } from "react";

const ProgressBar = ({ progress }) => {
  const [animatedProgress, setAnimatedProgress] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setAnimatedProgress(progress);
    }, 200);
  }, [progress]);

  return (
    <div className="outer">
      <div
        className="inner"
        style={{
          transform: `translateX(${animatedProgress - 100}%)`,
          color: animatedProgress < 5 ? "black" : "white",
        }}
        role="progressbar"
        aria-valuenow={animatedProgress}
        aria-valuemax={"100"}
        aria-valuemin={"0"}
      >
        {animatedProgress}%
      </div>
    </div>
  );
};

export default ProgressBar;

The CSS:

.outer {
  border: 1px solid black;
  border-radius: 12px;
  overflow: hidden;
}

.inner {
  background-color: red;
  color: white;
  text-align: right;
  transition: 1s ease-in-out;
}

How the React Implementation Works

State Management: We use the useState hook to track animatedProgress, which controls the visual state of our progress bar
Animation: The useEffect hook triggers when the progress prop changes, and we use setTimeout to create a small delay before updating the animated value
Styling: We use inline styles for dynamic properties like transform and color, while keeping static styles in CSS
Accessibility: The component includes proper ARIA attributes (role="progressbar", aria-valuenow, aria-valuemax, aria-valuemin)
Visual Technique: We use CSS transform with translateX() to create the fill effect by shifting the element from right to left

To use this component:

import ProgressBar from "./component/ProgressBar";

export default function App() {
  return (
    <div className="App">
      <h1>React Progress Bar Demo</h1>
      <ProgressBar progress={70} />
    </div>
  );
}

Implementation in Angular

Now, let's implement the same progress bar in Angular:

// progress-bar.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-progress-bar',
  template: `
    <div class="outer">
      <div
        class="inner"
        [style.transform]="'translateX(' + (animatedProgress - 100) + '%)'"
        [style.color]="animatedProgress < 5 ? 'black' : 'white'"
        role="progressbar"
        [attr.aria-valuenow]="animatedProgress"
        aria-valuemax="100"
        aria-valuemin="0"
      >
        {{animatedProgress}}%
      </div>
    </div>
  `,
  styleUrls: ['./progress-bar.component.css']
})
export class ProgressBarComponent implements OnChanges {
  @Input() progress: number = 0;
  animatedProgress: number = 0;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['progress']) {
      setTimeout(() => {
        this.animatedProgress = this.progress;
      }, 200);
    }
  }
}

The CSS file (progress-bar.component.css):

.outer {
  border: 1px solid black;
  border-radius: 12px;
  overflow: hidden;
}

.inner {
  background-color: red;
  color: white;
  text-align: right;
  transition: 1s ease-in-out;
}

To use this component in an Angular application:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h1>Angular Progress Bar Demo</h1>
      <app-progress-bar [progress]="70"></app-progress-bar>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Additional functionality can be added here
}

Enhancing Your Progress Bar

Regardless of which framework you choose, here are some enhancements you might consider:

1. Add Indeterminate State

For operations where progress can't be determined, add an indeterminate state:

/* Indeterminate animation */
@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.indeterminate {
  width: 100%;
  animation: indeterminate 1.5s infinite linear;
}

2. Add Color Variations

Different colors can convey different meanings:

// React example
const ProgressBar = ({ progress, variant = 'primary' }) => {
  // ...existing code

  return (
    <div className="outer">
      <div
        className={`inner ${variant}`}
        // ...existing attributes
      >
        {animatedProgress}%
      </div>
    </div>
  );
};

3. Add Buffer Indication

For uploads or streaming operations, a buffer indicator can be useful:

.buffer {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.2) 10px,
    rgba(255,255,255,0.3) 10px,
    rgba(255,255,255,0.3) 20px
  );
  z-index: 1;
}

Performance Considerations

Both implementations use CSS transitions for animation, which is performant as it leverages the browser's compositor thread. However, be cautious of:

Frequent Updates: Rapidly changing progress values can cause jank
Layout Thrashing: Avoid reading layout properties in the same tick as you're writing them
Mobile Performance: Animations might need to be simplified on lower-powered devices

Accessibility Best Practices

Our implementations already include basic ARIA attributes, but you might also want to:

Add an accessible label: aria-label="File upload progress"
Include status updates for screen readers using ARIA live regions
Consider high contrast modes for users with visual impairments

Conclusion

Progress bars are a seemingly simple UI component that can significantly enhance user experience. Both React and Angular provide robust ways to implement them, with the choice between frameworks often coming down to your existing tech stack or personal preference.

Whether you're using React's hooks or Angular's component architecture, the key is to focus on creating a smooth, accessible experience that keeps your users informed and engaged throughout longer operations.

Remember, the best progress bar is one that users barely notice—it should feel like a natural part of the interface that simply does its job without drawing unnecessary attention.

Happy coding!

Speculation Rules and Modern Frontend Frameworks: Integration Guide

Sankalan Dasgupta — Sun, 16 Mar 2025 06:44:49 +0000

The web platform continues to evolve with APIs that push the boundaries of performance optimization. Among these innovations, the Speculation Rules API stands out as a powerful tool for frontend developers looking to deliver lightning-fast experiences. This API allows browsers to predictively fetch and render content before users even click a link, dramatically reducing perceived latency.

In this guide, we'll explore how to effectively integrate Speculation Rules with today's most popular frontend frameworks. Whether you're working with React, Vue, Angular, or Svelte, you'll learn practical patterns that leverage this API to its full potential while avoiding common pitfalls.

Understanding Speculation Rules: A Quick Primer

Before diving into framework-specific implementations, let's establish a clear understanding of what Speculation Rules actually do.

The Speculation Rules API provides a standardized way to hint to the browser that certain navigations are likely to happen. The browser can then speculatively fetch and even render those pages in the background, making subsequent navigations nearly instantaneous.

The API supports two primary modes:

Prefetch: The browser fetches resources but doesn't render them
Prerender: The browser fetches AND renders content in a hidden state

Here's the basic syntax:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/likely-next-page"]
    }
  ]
}
</script>

Core Concepts of Speculation Rules API

Before implementing Speculation Rules in your framework, it's important to understand several key concepts that form the foundation of this API:

1. Document Policy and Feature Policy

Speculation Rules operate within the browser's policy framework. Document policy controls what features are available within a document, while feature policy determines which origins can use specific features. For Speculation Rules to work properly:

The target page must allow prerendering via the document policy header: Document-Policy: prerender=1
Cross-origin speculation requires appropriate permissions

2. Speculation Candidates vs. Matching Rules

Speculation Rules work through two key components:

Speculation Candidates: These are potential navigation targets that the browser considers for speculation
Matching Rules: These define conditions under which speculation should occur

The browser constantly evaluates these rules against the current state and user interaction to determine when to trigger speculation.

3. Sources of Speculation

The API provides multiple "sources" for generating speculation candidates:

list: Explicitly provided URLs (most common approach)
document: Rules that apply to the entire document
selector: Elements matching specific CSS selectors

For example, using the selector source:

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "selector",
      "selector": "a.important-link" 
    }
  ]
}
</script>

4. Speculation Triggers

Rules can be triggered by various events:

immediate: Apply rules immediately (default)
viewport: Apply when elements enter the viewport
hover: Apply when users hover over elements

5. Conditional Speculation

You can also specify conditions for when speculation should occur:

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/product/1"],
      "where": {
        "connection": ["4g", "5g"]
      }
    }
  ]
}
</script>

These conditions can include network type, device memory, and other contextual factors.

React Integration

React's declarative nature works well with Speculation Rules, but we need a clean way to manage these rules as part of our component architecture.

Approach 1: Using Helmet or Head Components

If you're using React Helmet or Next.js's Head component, you can inject speculation rules directly:

import { Helmet } from 'react-helmet';

function ProductListing({ topProducts }) {
  // Generate likely next products based on user behavior
  const likelyNextProducts = topProducts.slice(0, 3).map(p => `/product/${p.id}`);

  const speculationRules = {
    prerender: [
      {
        source: "list",
        urls: likelyNextProducts
      }
    ]
  };

  return (
    <>
      <Helmet>
        <script type="speculationrules">
          {JSON.stringify(speculationRules)}
        </script>
      </Helmet>
      {/* Your component JSX */}
    </>
  );
}

Approach 2: Custom Hooks for Speculation

For a more reusable pattern, consider creating a custom hook:

function useSpeculation(urls, mode = 'prerender') {
  React.useEffect(() => {
    // Create and inject the speculation rules element
    const script = document.createElement('script');
    script.type = 'speculationrules';
    script.text = JSON.stringify({
      [mode]: [{ source: "list", urls }]
    });

    document.head.appendChild(script);

    // Clean up when component unmounts
    return () => {
      document.head.removeChild(script);
    };
  }, [urls.join(','), mode]); // Re-run when URLs change
}

// Usage in component
function CategoryPage() {
  const likelyProducts = ['/product/1', '/product/2'];
  useSpeculation(likelyProducts);

  return (
    // Component JSX
  );
}

React Router Integration

If you're using React Router, you can enhance your router configuration:

function EnhancedLink({ to, children, likelihood = 'low', ...props }) {
  const speculationMode = 
    likelihood === 'high' ? 'prerender' : 
    likelihood === 'medium' ? 'prefetch' : null;

  React.useEffect(() => {
    if (speculationMode) {
      const script = document.createElement('script');
      script.type = 'speculationrules';
      script.text = JSON.stringify({
        [speculationMode]: [{ source: "list", urls: [to] }]
      });
      document.head.appendChild(script);

      return () => document.head.removeChild(script);
    }
  }, [to, speculationMode]);

  return <Link to={to} {...props}>{children}</Link>;
}

Angular Integration

Angular provides several mechanisms for working with Speculation Rules.

Service-Based Approach

@Injectable({
  providedIn: 'root'
})
export class SpeculationService {
  private currentScript: HTMLScriptElement | null = null;

  speculate(urls: string[], mode: 'prefetch' | 'prerender' = 'prerender'): void {
    // Remove any existing speculation script
    this.clearSpeculation();

    // Create new script element
    const script = document.createElement('script');
    script.type = 'speculationrules';
    script.textContent = JSON.stringify({
      [mode]: [{ source: "list", urls }]
    });

    document.head.appendChild(script);
    this.currentScript = script;
  }

  clearSpeculation(): void {
    if (this.currentScript && document.head.contains(this.currentScript)) {
      document.head.removeChild(this.currentScript);
    }
    this.currentScript = null;
  }
}

// Usage in component
@Component({...})
export class ProductListComponent implements OnInit, OnDestroy {
  constructor(private speculationService: SpeculationService) {}

  ngOnInit() {
    this.speculationService.speculate([
      '/products/featured',
      '/category/bestsellers'
    ]);
  }

  ngOnDestroy() {
    this.speculationService.clearSpeculation();
  }
}

Router Event Integration

A more sophisticated approach is to integrate with Angular's router:

@Injectable({
  providedIn: 'root'
})
export class NavigationPredictionService {
  constructor(
    private router: Router,
    private speculationService: SpeculationService
  ) {
    // Listen for navigation end events
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      // Track navigation history
    ).subscribe(event => {
      // Predict next likely routes based on current route
      const likelyNextRoutes = this.predictNextRoutes(event.url);

      if (likelyNextRoutes.length) {
        this.speculationService.speculate(likelyNextRoutes);
      }
    });
  }

  private predictNextRoutes(currentUrl: string): string[] {
    // Implement prediction logic here
    // Could use analytics data, user behavior, or predefined paths
    // ...
  }
}

Advanced Implementation Patterns

Data-Driven Speculation

For truly intelligent speculation, consider these advanced patterns:

Analytics-Informed Speculation: Use your application's analytics to determine the most likely next pages based on historical user flows.

// Pseudocode example
function getPredictedRoutes(currentRoute) {
  // Query your analytics service
  return analyticsService.getTopNextPagesFrom(currentRoute, 3);
}

User-Behavior Speculation: Adapt speculation based on individual user behavior:

function getUserSpecificRoutes(userId, currentRoute) {
  // Combine global analytics with user-specific patterns
  const globalPredictions = getPredictedRoutes(currentRoute);
  const userPreferences = userService.getPreferences(userId);

  // Adjust predictions based on user preferences
  return optimizeRoutesForUser(globalPredictions, userPreferences);
}

Resource-Aware Speculation: Consider device capabilities and network conditions:

function getAdaptiveSpeculationConfig() {
  const networkType = navigator.connection?.type;
  const isLowPowerMode = getBatteryInfo().isLowPower;

  // Adjust speculation strategy based on conditions
  if (networkType === '4g' && !isLowPowerMode) {
    return { mode: 'prerender', maxItems: 5 };
  } else if (networkType === '3g') {
    return { mode: 'prefetch', maxItems: 2 };
  } else {
    return { mode: 'prefetch', maxItems: 1 };
  }
}

Performance Considerations and Gotchas

While Speculation Rules can dramatically improve performance, they come with important considerations:

Resource Consumption: Prerendering consumes CPU and memory. Use it judiciously.
Analytics Impact: Speculative navigation can trigger analytics events. Make sure your analytics implementation can distinguish between actual and speculative page views.
Authentication Handling: Be careful with authenticated content. Speculation works best with public content that doesn't expose sensitive data.
Browser Support: Implement with progressive enhancement in mind, as browser support is still evolving.

Testing and Measuring Impact

To validate your implementation:

Use Chrome DevTools to monitor the Speculation Rules panel
Implement before/after metrics for:
- Time to Interactive (TTI)
- First Input Delay (FID)
- Largest Contentful Paint (LCP)
A/B test different speculation strategies

Conclusion

Integrating Speculation Rules with modern frontend frameworks offers a powerful way to enhance performance with minimal effort. The patterns shown here demonstrate that each framework provides elegant ways to incorporate this API into your existing architecture.

As this API matures, we can expect even more sophisticated integrations and broader browser support. By implementing these patterns today, you're preparing your applications for an even faster web tomorrow.

Resources

Optimizing React Native for Enterprise: The Definitive Guide

Sankalan Dasgupta — Tue, 25 Feb 2025 06:17:41 +0000

React Native has established itself as a powerful framework for building cross-platform mobile applications, allowing organizations to maintain a single codebase while targeting multiple platforms. However, as enterprise applications grow in complexity, performance optimization becomes critical for user experience and business success.

In this guide, I'll share strategies and best practices for optimizing enterprise-scale React Native applications, based on experiences implementing these techniques at scale.

Performance Metrics That Matter

Before diving into optimization techniques, it's important to establish which metrics matter most:

Time to Interactive (TTI): How quickly users can interact with your app after launch
Frame Rate: Maintaining a smooth 60fps for animations and scrolling
Memory Usage: Preventing crashes and slowdowns from excessive memory consumption
Bundle Size: Affecting download times and update adoption rates
Battery Consumption: Critical for all-day usage scenarios

Architecture Optimization

Implement a Strong Component Architecture

Large enterprise apps benefit from a thoughtful component architecture:

// A well-structured component with clear separation of concerns
const ProductCard = ({ product, onAddToCart }) => {
  const { isLoading, error, data } = useProductDetails(product.id);

  // Error and loading states handled locally
  if (isLoading) return <LoadingPlaceholder />;
  if (error) return <ErrorComponent message={error.message} />;

  return (
    <Pressable onPress={() => onAddToCart(product.id)}>
      <ProductImage source={data.imageUri} />
      <ProductInfo 
        name={data.name}
        price={data.price}
        availability={data.stock > 0 ? 'In Stock' : 'Out of Stock'}
      />
    </Pressable>
  );
};

State Management Patterns

Choose the right state management approach based on your app's complexity:

Context API: For simpler state needs with moderate component nesting
Redux: For complex state with many interactions and middleware requirements
MobX: For reactive applications with complex derived state
Recoil: For state that depends on other state with fine-grained updates

Rendering Optimization

Upgrade to FlashList for Superior List Performance

While FlatList is React Native's standard list component, FlashList by Shopify offers significant performance improvements for enterprise applications:

import { FlashList } from '@shopify/flash-list';

// FlashList implementation
const ProductListScreen = () => {
  return (
    <FlashList
      data={products}
      renderItem={({ item }) => <ProductCard product={item} />}
      estimatedItemSize={200} // Key for performance
      keyExtractor={item => item.id}
      onEndReachedThreshold={0.5}
      onEndReached={loadMoreProducts}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={refreshData} />
      }
    />
  );
};

Why FlashList outperforms FlatList:

Uses cell recycling to minimize memory usage and reduce garbage collection
Requires estimatedItemSize to pre-allocate memory more efficiently
Renders off-screen items much more efficiently
Maintains better scroll performance with complex list items
Can improve performance by up to 10x on large lists with complex items

Implement Fast Image Loading with react-native-fast-image

Replace standard Image components with FastImage for better performance:

import FastImage from 'react-native-fast-image';

const ProductImage = ({ uri, priority = 'normal' }) => {
  return (
    <FastImage
      style={{ width: 200, height: 200 }}
      source={{
        uri: uri,
        priority: FastImage.priority[priority],
        cache: FastImage.cacheControl.immutable
      }}
      resizeMode={FastImage.resizeMode.cover}
    />
  );
};

Why FastImage outperforms standard Image component:

Uses native image caching libraries (SDWebImage on iOS, Glide on Android)
Provides priority settings for critical images
Handles image caching more efficiently
Reduces memory footprint for image-heavy applications
Supports progressive JPEG loading

Optimize View Movement with Rasterization

When moving views on screen (scrolling, translating, rotating), UI thread FPS can drop significantly, especially with transparent backgrounds over images or situations requiring alpha compositing:

const AnimatedProductCard = ({ product, isActive }) => {
  return (
    <Animated.View
      style={[
        styles.card,
        { transform: [{ scale: isActive ? 1.05 : 1 }] }
      ]}
      shouldRasterizeIOS={isActive} // Enable during animation
      renderToHardwareTextureAndroid={isActive} // Android equivalent
    >
      <Image 
        source={{ uri: product.imageUri }} 
        style={styles.productImage} 
      />
      <Text style={styles.transparentOverlay}>{product.name}</Text>
    </Animated.View>
  );
};

Best practices for rasterization:

Only enable during animations or movements (shouldRasterizeIOS/renderToHardwareTextureAndroid)
Disable once motion completes to prevent memory bloat
Profile memory usage when implementing this technique
Particularly useful for complex views with transparency
Consider implementing a utility hook that automatically toggles these properties:

const useOptimizedAnimation = (isAnimating) => {
  const [rasterized, setRasterized] = useState(false);

  useEffect(() => {
    if (isAnimating && !rasterized) {
      setRasterized(true);
    } else if (!isAnimating && rasterized) {
      // Small delay before turning off rasterization
      const timer = setTimeout(() => setRasterized(false), 300);
      return () => clearTimeout(timer);
    }
  }, [isAnimating, rasterized]);

  return {
    shouldRasterizeIOS: rasterized,
    renderToHardwareTextureAndroid: rasterized
  };
};

// Usage
const MyAnimatedComponent = () => {
  const [isAnimating, setIsAnimating] = useState(false);
  const rasterProps = useOptimizedAnimation(isAnimating);

  return (
    <Animated.View {...rasterProps}>
      {/* Component content */}
    </Animated.View>
  );
};

Memoize Components and Callbacks

Prevent unnecessary re-renders with React.memo and useCallback:

// Memoized component
const ProductSummary = React.memo(({ name, price }) => (
  <View>
    <Text>{name}</Text>
    <Text>${price.toFixed(2)}</Text>
  </View>
));

// In parent component
const ProductList = ({ products }) => {
  const handleProductSelect = useCallback((id) => {
    // Handle selection logic
    navigation.navigate('ProductDetail', { id });
  }, [navigation]);

  return (
    <FlashList
      data={products}
      renderItem={({ item }) => (
        <ProductSummary 
          name={item.name}
          price={item.price}
          onSelect={() => handleProductSelect(item.id)}
        />
      )}
      estimatedItemSize={120}
    />
  );
};

Network Optimization

Implement Efficient API Layer

Create a robust API layer with caching, retries, and offline support:

import NetInfo from '@react-native-community/netinfo';
import { setupCache } from 'axios-cache-adapter';

// Create a cached axios instance
const cache = setupCache({
  maxAge: 15 * 60 * 1000, // 15 minutes
  exclude: { query: false },
  clearOnError: true,
});

const api = axios.create({
  baseURL: 'https://api.company.com',
  adapter: cache.adapter,
});

// Network status monitoring
NetInfo.addEventListener(state => {
  if (state.isConnected) {
    syncOfflineData();
  }
});

// Fetch with offline fallback
export const fetchProducts = async () => {
  try {
    const response = await api.get('/products');
    storeLocally(response.data);
    return response.data;
  } catch (error) {
    if (!navigator.onLine) {
      return getLocalData('products');
    }
    throw error;
  }
};

Implement GraphQL for Data Requirements

GraphQL can significantly reduce payload sizes by requesting only needed data:

const PRODUCT_QUERY = gql`
  query GetProduct($id: ID!) {
    product(id: $id) {
      id
      name
      price
      # Only request fields needed for this view
      ${isDetailView ? `
        description
        specifications {
          name
          value
        }
        reviews {
          id
          rating
          comment
        }
      ` : ''}
    }
  }
`;

JavaScript Engine Optimization

Reduce JavaScript Execution Time

Keep your JavaScript functions efficient:

// Inefficient
const sortProducts = (products) => {
  return [...products].sort((a, b) => {
    return a.name.localeCompare(b.name);
  });
};

// More efficient
const sortProducts = (products, sortField = 'name') => {
  // Create sort key map to avoid repeated property access
  const sortKeys = products.map((p, index) => ({ 
    index, 
    key: p[sortField]
  }));

  sortKeys.sort((a, b) => {
    if (typeof a.key === 'string') {
      return a.key.localeCompare(b.key);
    }
    return a.key - b.key;
  });

  return sortKeys.map(item => products[item.index]);
};

Implement Turbo Modules for Native Performance

Turbo Modules are the next generation of React Native's native module system, offering improved performance and type safety:

// First, define your Turbo Module spec (in ImageProcessor.js)
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  // Specify the function signature with proper types
  processImage(
    imageUri: string, 
    options: {
      resize?: { width: number, height: number },
      format?: string,
      quality?: number
    }
  ): Promise<{ processedUri: string, width: number, height: number }>;
}

// Get the Turbo Module implementation
export default TurboModuleRegistry.getEnforcing<Spec>('ImageProcessor');

// Usage in your app
import ImageProcessor from './ImageProcessor';

const optimizeProductImage = async (uri) => {
  try {
    const result = await ImageProcessor.processImage(uri, {
      resize: { width: 600, height: 600 },
      format: 'webp',
      quality: 85
    });

    console.log(`Image processed: ${result.width}x${result.height}`);
    return result.processedUri;
  } catch (error) {
    console.error('Failed to process image:', error);
    return uri; // Fallback
  }
};

Why Turbo Modules outperform the legacy native module system:

Lazy loading for improved startup time
Direct JSI calls that skip serialization/deserialization
Type-safe interfaces
Better memory management
Improved error handling
Reduced bundle size
Works with Fabric architecture (React Native's new rendering system)

Asset Optimization

Implement Progressive Loading for Images

Use a progressive loading strategy for images:

import FastImage from 'react-native-fast-image';

const ProductImage = ({ uri, thumbnailUri, placeholderColor = '#EAEAEA' }) => {
  const [showPlaceholder, setShowPlaceholder] = useState(true);
  const [showThumbnail, setShowThumbnail] = useState(true);

  return (
    <View>
      {showPlaceholder && (
        <View 
          style={[styles.imagePlaceholder, { backgroundColor: placeholderColor }]} 
        />
      )}

      {showThumbnail && thumbnailUri && (
        <FastImage
          source={{ uri: thumbnailUri, priority: FastImage.priority.high }}
          style={[styles.image, { opacity: showPlaceholder ? 0.3 : 0.7 }]}
          onLoadEnd={() => setShowPlaceholder(false)}
        />
      )}

      <FastImage
        source={{ 
          uri: uri,
          priority: FastImage.priority.normal,
          cache: FastImage.cacheControl.immutable
        }}
        style={styles.image}
        onLoadEnd={() => {
          setShowPlaceholder(false);
          setShowThumbnail(false);
        }}
      />
    </View>
  );
};

Optimize Font Loading

Load fonts efficiently to prevent layout shifts:

// In your App.js
import * as Font from 'expo-font';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        'company-regular': require('./assets/fonts/Company-Regular.ttf'),
        'company-medium': require('./assets/fonts/Company-Medium.ttf'),
        'company-bold': require('./assets/fonts/Company-Bold.ttf'),
      });
      setFontsLoaded(true);
    }

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <NavigationContainer>
      <AppContent />
    </NavigationContainer>
  );
}

Build Process Optimization

Implement Hermes JavaScript Engine

Enabling Hermes significantly improves startup time and reduces memory usage:

// In android/app/build.gradle
def enableHermes = project.ext.react.get("enableHermes", true);

// In ios/Podfile
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

Use Code Splitting with Dynamic Imports

For large enterprise apps, code splitting can dramatically improve initial load times:

// Instead of importing directly
// import HeavyFeature from './HeavyFeature';

// Use dynamic import
const HeavyFeatureScreen = ({ navigation }) => {
  const [FeatureComponent, setFeatureComponent] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function loadComponent() {
      try {
        const module = await import('./HeavyFeature');
        setFeatureComponent(() => module.default);
      } catch (error) {
        console.error('Failed to load component:', error);
      } finally {
        setIsLoading(false);
      }
    }

    loadComponent();
  }, []);

  if (isLoading) {
    return <LoadingScreen />;
  }

  return FeatureComponent ? <FeatureComponent /> : <ErrorScreen />;
};

Monitoring and Measurement

Implement Performance Monitoring

Use tools to measure real-world performance:

import perf from '@react-native-firebase/perf';

const ProductScreen = () => {
  useEffect(() => {
    const fetchData = async () => {
      // Create a trace for a performance event
      const trace = await perf().startTrace('load_product_screen');

      try {
        // Add custom metrics to your trace
        trace.putMetric('product_count', products.length);

        // Start an HTTP metric for the network request
        const httpMetric = perf().newHttpMetric('https://api.example.com/products', 'GET');
        await httpMetric.start();

        // Perform fetch
        const response = await fetch('https://api.example.com/products');
        const data = await response.json();

        // Set additional HTTP metric attributes
        httpMetric.setHttpResponseCode(response.status);
        httpMetric.setResponseContentType(response.headers.get('Content-Type'));
        httpMetric.setResponsePayloadSize(JSON.stringify(data).length);

        // Stop the HTTP metric
        await httpMetric.stop();

        setProducts(data);
      } finally {
        // Stop the trace
        await trace.stop();
      }
    };

    fetchData();
  }, []);

  // Component JSX
};

Conclusion

Optimizing enterprise React Native applications requires a systematic approach addressing architecture, rendering, networking, and build processes. By implementing these strategies—especially upgrading to high-performance libraries like FlashList and FastImage, leveraging rasterization techniques, and adopting Turbo Modules—you can deliver a premium experience to your users while maintaining developer productivity and code maintainability.

Optimization is an never ending process that should be guided by data. Establish performance baselines, continuously monitor real-world metrics, and focus your efforts where they'll have the greatest impact on user experience.