Preloading

Preloading fetches and caches components before they're needed, ensuring instant display when users navigate to them.

Basic Preloading

TSX

import { preloadComponents, preloadComponent } from '@dpage-ai/react-native-dpage';

// Preload multiple components
await preloadComponents(['ProductCard', 'UserProfile', 'CheckoutForm']);

// Preload a single component
await preloadComponent('PromoBanner');

Preload on App Start

The most common pattern is preloading critical components when your app initializes:

App.tsx

import { useEffect } from 'react';
import { initDPage, preloadComponents } from '@dpage-ai/react-native-dpage';

// Initialize SDK
initDPage({
  projectId: 'my-project',
  apiToken: 'dpage_live_xxx',
});

function App() {
  useEffect(() => {
    // Preload mission-critical components
    preloadComponents([
      'HomeHeader',
      'BottomNavigation',
      'PromoBanner',
      'ProductCard',
    ]).then(({ loaded, failed }) => {
      console.log(`Preloaded ${loaded} components`);
      if (failed > 0) {
        console.warn(`Failed to preload ${failed} components`);
      }
    });
  }, []);

  return <YourApp />;
}

Preload Result

preloadComponents returns a promise with loading statistics:

TSX

const result = await preloadComponents(['A', 'B', 'C']);

console.log(result);
// {
//   loaded: 3,    // Number successfully loaded
//   failed: 0,    // Number that failed to load
// }

Preload with Project ID

Preload components from a specific project:

TSX

// Preload from a different project
await preloadComponent('SpecialBanner', 'marketing-project');

await preloadComponents(
  ['PromoA', 'PromoB', 'PromoC'],
  'marketing-project'
);

Lazy Preloading Strategies

Screen-Based Preloading

Preload components when users navigate to a screen:

TSX

import { useFocusEffect } from '@react-navigation/native';
import { preloadComponents } from '@dpage-ai/react-native-dpage';

function ProductListScreen() {
  useFocusEffect(
    useCallback(() => {
      // Preload components users might need next
      preloadComponents([
        'ProductDetail',
        'AddToCart',
        'ProductReviews',
      ]);
    }, [])
  );

  return <ProductList />;
}

User Interaction-Based Preloading

Preload based on user behavior:

TSX

function ProductCard({ productId }) {
  const handlePressIn = () => {
    // Preload detail components when user starts pressing
    preloadComponents([
      'ProductDetail',
      'ProductImages',
      'AddToCart',
    ]);
  };

  return (
    <Pressable 
      onPressIn={handlePressIn}
      onPress={() => navigate('ProductDetail', { productId })}
    >
      <ProductCardContent />
    </Pressable>
  );
}

Predictive Preloading

Preload components based on user behavior patterns (hover, press-in, scroll near bottom) for the best user experience.

Idle-Time Preloading

Preload during app idle time:

TSX

import { InteractionManager } from 'react-native';

function HomeScreen() {
  useEffect(() => {
    // Wait for animations/interactions to complete
    InteractionManager.runAfterInteractions(() => {
      preloadComponents([
        'ProfileSettings',
        'NotificationSettings',
        'HelpCenter',
      ]);
    });
  }, []);

  return <HomeContent />;
}

Force Refresh

Sometimes you need to fetch the latest version, bypassing cache:

TSX

import { refreshComponent } from '@dpage-ai/react-native-dpage';

// Force refresh from API
await refreshComponent('PromoBanner');

// Refresh with specific project
await refreshComponent('PromoBanner', 'marketing-project');

Best Practices

✅

Prioritize critical path

Preload components on screens users see first (home, login, main navigation).

✅

Don't over-preload

Only preload components users are likely to see. Excessive preloading wastes bandwidth.

✅

Use predictive preloading

Preload based on user behavior patterns for the best experience.

✅

Handle failures gracefully

Preload failures shouldn't block app functionality. Components will retry when rendered.

Example: Complete Preloading Setup

src/utils/preload.ts

import { preloadComponents } from '@dpage-ai/react-native-dpage';
import { InteractionManager } from 'react-native';

// Critical components - preload immediately
export const preloadCritical = () => 
  preloadComponents([
    'AppHeader',
    'BottomNav',
    'HomeHero',
  ]);

// Secondary components - preload after critical
export const preloadSecondary = () =>
  preloadComponents([
    'ProductCard',
    'CategoryList',
    'PromoBanner',
  ]);

// Lazy components - preload during idle
export const preloadLazy = () =>
  preloadComponents([
    'Settings',
    'Profile',
    'HelpCenter',
  ]);

App.tsx

import { useEffect } from 'react';
import { preloadCritical, preloadSecondary, preloadLazy } from './utils/preload';
import { InteractionManager } from 'react-native';

function App() {
  useEffect(() => {
    // Phase 1: Critical
    preloadCritical().then(() => {
      // Phase 2: Secondary
      preloadSecondary();
    });

    // Phase 3: Lazy (after interactions)
    InteractionManager.runAfterInteractions(() => {
      preloadLazy();
    });
  }, []);

  return <Navigation />;
}