Pengembangan aplikasi React Native di tahun 2026 telah mengalami transformasi fundamental dengan versi 0.87 yang kini menjadikan New Architecture sebagai satu-satunya opsi yang didukung. Bridge lama yang sebelumnya menserialisasi setiap panggilan JavaScript-ke-native sebagai JSON telah dihapus, digantikan oleh JSI (JavaScript Interface) untuk komunikasi sinkron langsung.

Perubahan di React Native 0.87

React Native 0.87 mewajibkan penggunaan New Architecture. Bridge lama telah dihapus sepenuhnya. Rendering list kompleks berjalan 43% lebih cepat, frame drop saat scroll berkurang 95%, dan penggunaan memori turun 33% dalam benchmark test.

Memahami JSI dan New Architecture

JSI (JavaScript Interface) menggantikan bridge asinkron dengan binding C++ langsung antara JavaScript dan kode native. Alih-alih menserialisasi data ke JSON, melewatkannya melalui message queue, dan mendeserialisinya di sisi lain, JSI memungkinkan JavaScript menyimpan referensi ke objek native dan memanggil method-nya secara langsung.

Perubahan arsitektur ini memungkinkan tiga kapabilitas inti: panggilan native sinkron, kepemilikan bersama objek antara layer JavaScript dan native, serta lazy loading modul native.

NativeUserModule.tstypescript

import { TurboModuleRegistry, TurboModule } from 'react-native';

export interface Spec extends TurboModule {
  getUserProfile(userId: string): Promise<{
    id: string;
    name: string;
    email: string;
  }>;
  
  // Panggilan sinkron - hanya dimungkinkan dengan JSI
  getDeviceLocale(): string;
}

export default TurboModuleRegistry.getEnforcing<Spec>('UserModule');

Method getDeviceLocale() mengembalikan nilai secara langsung tanpa menunggu Promise. Hal ini tidak mungkin dilakukan dengan bridge lama di mana setiap panggilan native memerlukan serialisasi asinkron.

Membangun Komponen Production-Ready dengan Fabric

Fabric adalah sistem rendering baru yang bekerja bersama JSI. Fabric mengelola UI tree dalam C++ dan melakukan sinkronisasi langsung dengan JavaScript thread, menghilangkan "UI jank" yang terjadi ketika bridge lama tertinggal selama update cepat.

ProductCard.tsxtypescript

import React, { memo, useCallback } from 'react';
import {
  View,
  Text,
  Image,
  Pressable,
  StyleSheet,
} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
  inStock: boolean;
}

interface ProductCardProps {
  product: Product;
  onPress: (id: string) => void;
}

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export const ProductCard = memo(function ProductCard({
  product,
  onPress,
}: ProductCardProps) {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const handlePressIn = useCallback(() => {
    scale.value = withSpring(0.95);
  }, [scale]);

  const handlePressOut = useCallback(() => {
    scale.value = withSpring(1);
  }, [scale]);

  const handlePress = useCallback(() => {
    onPress(product.id);
  }, [onPress, product.id]);

  return (
    <AnimatedPressable
      style={[styles.card, animatedStyle]}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      onPress={handlePress}
    >
      <Image source={{ uri: product.imageUrl }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{product.name}</Text>
        <Text style={styles.price}>
          Rp {product.price.toLocaleString('id-ID')}
        </Text>
        {!product.inStock && (
          <Text style={styles.outOfStock}>Stok Habis</Text>
        )}
      </View>
    </AnimatedPressable>
  );
});

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  image: {
    width: '100%',
    height: 200,
  },
  info: {
    padding: 16,
  },
  name: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 8,
  },
  price: {
    fontSize: 16,
    color: '#2563eb',
    fontWeight: '700',
  },
  outOfStock: {
    color: '#dc2626',
    marginTop: 4,
    fontSize: 14,
  },
});

Komponen ini menunjukkan beberapa pola kunci: memo untuk mencegah re-render yang tidak perlu, useCallback untuk menstabilkan referensi fungsi, dan Reanimated untuk animasi berbasis worklet yang berjalan di UI thread.

TurboModules: Modul Native Generasi Baru

TurboModules menggantikan Native Modules lama dengan pendekatan yang lebih efisien. Modul hanya dimuat saat pertama kali digunakan (lazy loading), bukan semuanya saat aplikasi startup.

specs/NativeAnalytics.tstypescript

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface AnalyticsEvent {
  name: string;
  properties: Record<string, string | number | boolean>;
  timestamp: number;
}

export interface Spec extends TurboModule {
  trackEvent(event: AnalyticsEvent): void;
  trackScreen(screenName: string): void;
  setUserId(userId: string): void;
  flush(): Promise<void>;
  getSessionId(): string; // Sinkron dengan JSI
}

export default TurboModuleRegistry.getEnforcing<Spec>('Analytics');

Spec TypeScript ini menghasilkan binding native yang type-safe. Method getSessionId() bersifat sinkron karena tidak mengembalikan Promise—ini dimungkinkan sepenuhnya oleh JSI.

Navigasi dengan Expo Router

Expo Router membawa navigasi berbasis file ke React Native, mirip dengan Next.js App Router. Struktur folder menentukan struktur rute aplikasi.

app/_layout.tsxtypescript

import { Stack } from 'expo-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
      gcTime: 5 * 60 * 1000,
    },
  },
});

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Stack
        screenOptions={{
          headerShown: false,
          animation: 'slide_from_right',
        }}
      />
    </QueryClientProvider>
  );
}

app/(tabs)/home.tsxtypescript

import { View, FlatList, RefreshControl } from 'react-native';
import { useQuery } from '@tanstack/react-query';
import { ProductCard } from '@/components/ProductCard';
import { fetchProducts } from '@/api/products';

export default function HomeScreen() {
  const { data, isLoading, refetch, isRefetching } = useQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
  });

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={data?.products}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <ProductCard product={item} onPress={() => {}} />
        )}
        refreshControl={
          <RefreshControl refreshing={isRefetching} onRefresh={refetch} />
        }
        contentContainerStyle={{ padding: 16, gap: 16 }}
      />
    </View>
  );
}

TanStack Query menangani caching, refetching, dan state management untuk data server. Kombinasi dengan Expo Router memberikan pengalaman developer yang sangat mirip dengan Next.js.

State Management dengan Zustand

Untuk state client-side, Zustand menawarkan API yang sederhana namun powerful:

stores/cartStore.tstypescript

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface CartItem {
  productId: string;
  quantity: number;
  price: number;
}

interface CartStore {
  items: CartItem[];
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
  totalPrice: () => number;
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) =>
        set((state) => {
          const existing = state.items.find(
            (i) => i.productId === item.productId
          );
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.productId === item.productId
                  ? { ...i, quantity: i.quantity + 1 }
                  : i
              ),
            };
          }
          return { items: [...state.items, { ...item, quantity: 1 }] };
        }),
      removeItem: (productId) =>
        set((state) => ({
          items: state.items.filter((i) => i.productId !== productId),
        })),
      updateQuantity: (productId, quantity) =>
        set((state) => ({
          items: state.items.map((i) =>
            i.productId === productId ? { ...i, quantity } : i
          ),
        })),
      clearCart: () => set({ items: [] }),
      totalPrice: () =>
        get().items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    }),
    {
      name: 'cart-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Middleware persist secara otomatis menyimpan state cart ke AsyncStorage dan menghidrasinya kembali saat aplikasi restart.

Testing dengan React Native Testing Library

Pengujian komponen React Native harus fokus pada perilaku dari perspektif pengguna, bukan detail implementasi:

__tests__/ProductCard.test.tsxtypescript

import { render, screen, fireEvent } from '@testing-library/react-native';
import { ProductCard } from '../ProductCard';

const mockProduct = {
  id: '1',
  name: 'Wireless Headphones',
  price: 1500000,
  imageUrl: 'https://example.com/image.jpg',
  inStock: true,
};

describe('ProductCard', () => {
  it('menampilkan informasi produk dengan benar', () => {
    render(<ProductCard product={mockProduct} onPress={() => {}} />);

    expect(screen.getByText('Wireless Headphones')).toBeOnTheScreen();
    expect(screen.getByText('Rp 1.500.000')).toBeOnTheScreen();
  });

  it('menampilkan badge stok habis ketika produk tidak tersedia', () => {
    const outOfStockProduct = { ...mockProduct, inStock: false };
    render(<ProductCard product={outOfStockProduct} onPress={() => {}} />);

    expect(screen.getByText('Stok Habis')).toBeOnTheScreen();
  });

  it('memanggil callback onPress dengan product id', () => {
    const onPressMock = jest.fn();
    render(<ProductCard product={mockProduct} onPress={onPressMock} />);

    fireEvent.press(screen.getByText('Wireless Headphones'));

    expect(onPressMock).toHaveBeenCalledWith('1');
  });
});

Pertanyaan Interview React Native 2026

Berikut adalah pertanyaan-pertanyaan teknis yang sering muncul dalam interview React Native:

Apa perbedaan antara bridge lama dan JSI?

Bridge lama menserialisasi semua data ke JSON dan mengirimnya melalui message queue asinkron. JSI menyediakan binding C++ langsung yang memungkinkan JavaScript menyimpan referensi ke objek native dan memanggil method secara sinkron.

Bagaimana Fabric meningkatkan performa rendering?

Fabric mengelola UI tree di C++ dan melakukan sinkronisasi langsung dengan JavaScript thread melalui JSI. Ini menghilangkan bottleneck rendering asinkron dan memungkinkan concurrent rendering dengan React 18.

Kapan sebaiknya menggunakan panggilan sinkron vs asinkron di TurboModules?

Panggilan sinkron hanya untuk operasi yang selesai dalam waktu kurang dari 16ms (satu frame). Contohnya mengambil locale device atau memeriksa permission. Operasi I/O seperti network request atau akses database harus tetap asinkron.

Jelaskan perbedaan antara useCallback dan useMemo!

useCallback memoize referensi fungsi dan berguna untuk mencegah re-render anak komponen yang menerima callback sebagai prop. useMemo memoize hasil komputasi dan berguna untuk menghindari kalkulasi mahal di setiap render.

Bagaimana cara mengoptimasi FlatList untuk dataset besar?

Gunakan getItemLayout jika tinggi item fixed untuk menghindari perhitungan layout. Set initialNumToRender, maxToRenderPerBatch, dan windowSize sesuai kebutuhan. Pastikan keyExtractor mengembalikan key yang stabil. Bungkus item dengan memo untuk mencegah re-render yang tidak perlu.

Optimasi Performa dan Monitoring

Aplikasi production harus melacak metrik performa sejak hari pertama:

utils/performance.tstypescript

import { PerformanceObserver } from 'react-native-performance';

export function setupPerformanceMonitoring() {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.entryType === 'measure') {
        // Kirim ke analytics service
        console.log(`${entry.name}: ${entry.duration}ms`);
      }
    });
  });

  observer.observe({ entryTypes: ['measure'] });
}

export function measureTTI(screenName: string) {
  const startMark = `${screenName}_start`;
  const endMark = `${screenName}_interactive`;
  const measureName = `${screenName}_tti`;

  performance.mark(startMark);

  return () => {
    performance.mark(endMark);
    performance.measure(measureName, startMark, endMark);
  };
}

Time to Interactive (TTI), frame drops, dan penggunaan memori adalah metrik utama yang harus dipantau. React Native 0.87 menyediakan built-in profiling tools yang terintegrasi dengan React DevTools.

Kesimpulan

Pengembangan aplikasi React Native di tahun 2026 berpusat pada New Architecture yang sekarang menjadi standar. Poin-poin penting yang perlu diingat:

New Architecture (JSI, Fabric, TurboModules) bersifat wajib di React Native 0.87. Bridge lama tidak lagi tersedia.
JSI memungkinkan panggilan native sinkron. Gunakan dengan bijak untuk operasi di bawah 16ms.
Fabric merender UI di C++ dan melakukan sinkronisasi dengan JavaScript via JSI, menghilangkan bottleneck rendering asinkron.
TurboModules dimuat secara lazy dan menyediakan binding type-safe yang dihasilkan dari spec TypeScript.
Expo Router menawarkan navigasi berbasis file yang mirip dengan Next.js App Router.
React Native Testing Library menguji komponen melalui public API dan accessibility tree.
Aplikasi production harus melacak TTI, frame drops, dan penggunaan memori sejak hari pertama.

Mulai berlatih!

Uji pengetahuan Anda dengan simulator wawancara dan tes teknis kami.

Buat akun gratis saya

Pengembangan Aplikasi React Native 2026: Panduan Lengkap dan Pertanyaan Interview