การพัฒนาแอปพลิเคชัน React Native ในปี 2026 ได้เปลี่ยนแปลงไปอย่างมากกับเวอร์ชัน 0.87 ที่ตอนนี้มี New Architecture เป็นตัวเลือกเดียวที่รองรับ Bridge แบบเดิมที่เคย serialize ทุกการเรียก JavaScript-to-native เป็น JSON ได้ถูกลบออกแล้ว แทนที่ด้วย JSI (JavaScript Interface) สำหรับการสื่อสารแบบ synchronous โดยตรง

การเปลี่ยนแปลงใน React Native 0.87

React Native 0.87 บังคับใช้ New Architecture Bridge แบบเดิมถูกลบออกทั้งหมด การ render รายการที่ซับซ้อนเร็วขึ้น 43% frame drop ขณะ scroll ลดลง 95% และการใช้หน่วยความจำลดลง 33% ในการทดสอบ benchmark

ทำความเข้าใจ JSI และ New Architecture

JSI (JavaScript Interface) แทนที่ bridge แบบ asynchronous ด้วย binding C++ โดยตรงระหว่าง JavaScript และโค้ด native แทนที่จะ serialize ข้อมูลเป็น JSON ส่งผ่าน message queue และ deserialize ที่อีกฝั่ง JSI ช่วยให้ JavaScript สามารถเก็บ reference ไปยังอ็อบเจกต์ native และเรียก method ของมันได้โดยตรง

การเปลี่ยนแปลงสถาปัตยกรรมนี้เปิดใช้งานความสามารถหลักสามประการ: การเรียก native แบบ synchronous, การแชร์ ownership ของอ็อบเจกต์ระหว่าง layer JavaScript และ native, และ lazy loading ของ module native

NativeUserModule.tstypescript

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

export interface Spec extends TurboModule {
  getUserProfile(userId: string): Promise<{
    id: string;
    name: string;
    email: string;
  }>;
  
  // การเรียกแบบ synchronous - เป็นไปได้เฉพาะกับ JSI
  getDeviceLocale(): string;
}

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

เมธอด getDeviceLocale() คืนค่าทันทีโดยไม่ต้อง await Promise สิ่งนี้เป็นไปไม่ได้กับ bridge แบบเดิมที่ทุกการเรียก native ต้องใช้ serialization แบบ asynchronous

สร้าง Component พร้อมใช้งาน Production ด้วย Fabric

Fabric คือระบบ rendering ใหม่ที่ทำงานร่วมกับ JSI มันจัดการ UI tree ใน C++ และ synchronize โดยตรงกับ JavaScript thread ขจัด "UI jank" ที่เกิดขึ้นเมื่อ bridge แบบเดิมล้าหลังระหว่างการ update ที่รวดเร็ว

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}>
          ฿{product.price.toLocaleString('th-TH')}
        </Text>
        {!product.inStock && (
          <Text style={styles.outOfStock}>สินค้าหมด</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,
  },
});

Component นี้แสดง pattern สำคัญหลายอย่าง: memo เพื่อป้องกัน re-render ที่ไม่จำเป็น, useCallback เพื่อทำให้ function reference มีเสถียรภาพ, และ Reanimated สำหรับ animation ที่ใช้ worklet ทำงานบน UI thread

TurboModules: Native Modules รุ่นใหม่

TurboModules แทนที่ Native Modules แบบเดิมด้วยวิธีการที่มีประสิทธิภาพมากขึ้น Module จะถูกโหลดเฉพาะเมื่อใช้งานครั้งแรก (lazy loading) ไม่ใช่ทั้งหมดตอนที่แอปเริ่มทำงาน

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; // Synchronous ด้วย JSI
}

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

Spec TypeScript นี้สร้าง binding native ที่ type-safe เมธอด getSessionId() เป็น synchronous เพราะไม่ return Promise—สิ่งนี้เป็นไปได้ทั้งหมดด้วย JSI

การนำทางด้วย Expo Router

Expo Router นำการนำทางแบบ file-based มาสู่ React Native คล้ายกับ Next.js App Router โครงสร้างโฟลเดอร์กำหนดโครงสร้าง route ของแอป

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 จัดการ caching, refetching, และ state management สำหรับข้อมูล server เมื่อรวมกับ Expo Router จะให้ประสบการณ์ developer ที่คล้ายกับ Next.js มาก

State Management ด้วย Zustand

สำหรับ state ฝั่ง client Zustand นำเสนอ API ที่เรียบง่ายแต่ทรงพลัง:

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 จะบันทึก state ตะกร้าสินค้าลง AsyncStorage โดยอัตโนมัติ และ hydrate กลับมาเมื่อแอป restart

Testing ด้วย React Native Testing Library

การทดสอบ component React Native ควรเน้นที่พฤติกรรมจากมุมมองของผู้ใช้ ไม่ใช่รายละเอียดการ implementation:

__tests__/ProductCard.test.tsxtypescript

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

const mockProduct = {
  id: '1',
  name: 'หูฟังไร้สาย',
  price: 1500,
  imageUrl: 'https://example.com/image.jpg',
  inStock: true,
};

describe('ProductCard', () => {
  it('แสดงข้อมูลสินค้าอย่างถูกต้อง', () => {
    render(<ProductCard product={mockProduct} onPress={() => {}} />);

    expect(screen.getByText('หูฟังไร้สาย')).toBeOnTheScreen();
    expect(screen.getByText('฿1,500')).toBeOnTheScreen();
  });

  it('แสดง badge สินค้าหมดเมื่อไม่มีสต็อก', () => {
    const outOfStockProduct = { ...mockProduct, inStock: false };
    render(<ProductCard product={outOfStockProduct} onPress={() => {}} />);

    expect(screen.getByText('สินค้าหมด')).toBeOnTheScreen();
  });

  it('เรียก callback onPress พร้อม product id', () => {
    const onPressMock = jest.fn();
    render(<ProductCard product={mockProduct} onPress={onPressMock} />);

    fireEvent.press(screen.getByText('หูฟังไร้สาย'));

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

คำถามสัมภาษณ์ React Native 2026

ต่อไปนี้คือคำถามทางเทคนิคที่มักพบในการสัมภาษณ์ React Native:

ความแตกต่างระหว่าง bridge แบบเดิมกับ JSI คืออะไร?

Bridge แบบเดิม serialize ข้อมูลทั้งหมดเป็น JSON และส่งผ่าน message queue แบบ asynchronous JSI ให้ binding C++ โดยตรงที่ช่วยให้ JavaScript เก็บ reference ไปยังอ็อบเจกต์ native และเรียก method แบบ synchronous ได้

Fabric ปรับปรุงประสิทธิภาพการ rendering อย่างไร?

Fabric จัดการ UI tree ใน C++ และ synchronize โดยตรงกับ JavaScript thread ผ่าน JSI สิ่งนี้ขจัด bottleneck การ rendering แบบ asynchronous และเปิดใช้งาน concurrent rendering กับ React 18

ควรใช้การเรียกแบบ synchronous vs asynchronous เมื่อไหร่ใน TurboModules?

การเรียกแบบ synchronous ใช้สำหรับ operation ที่เสร็จในเวลาน้อยกว่า 16ms (หนึ่ง frame) เท่านั้น ตัวอย่างเช่นการดึง locale ของอุปกรณ์หรือตรวจสอบ permission Operation I/O เช่น network request หรือการเข้าถึง database ต้องเป็น asynchronous

อธิบายความแตกต่างระหว่าง useCallback และ useMemo!

useCallback memoize function reference และมีประโยชน์ในการป้องกัน re-render ของ component ลูกที่รับ callback เป็น prop useMemo memoize ผลลัพธ์การคำนวณและมีประโยชน์ในการหลีกเลี่ยงการคำนวณที่ใช้ทรัพยากรมากในทุกการ render

จะ optimize FlatList สำหรับ dataset ขนาดใหญ่ได้อย่างไร?

ใช้ getItemLayout ถ้าความสูงของ item คงที่เพื่อหลีกเลี่ยงการคำนวณ layout ตั้งค่า initialNumToRender, maxToRenderPerBatch, และ windowSize ตามความต้องการ ตรวจสอบว่า keyExtractor return key ที่มีเสถียรภาพ ครอบ item ด้วย memo เพื่อป้องกัน re-render ที่ไม่จำเป็น

การ Optimize ประสิทธิภาพและ Monitoring

แอป production ต้องติดตาม metric ประสิทธิภาพตั้งแต่วันแรก:

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') {
        // ส่งไปยัง 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, และการใช้หน่วยความจำเป็น metric หลักที่ต้องติดตาม React Native 0.87 มี built-in profiling tools ที่รวมกับ React DevTools

สรุป

การพัฒนาแอปพลิเคชัน React Native ในปี 2026 มุ่งเน้นที่ New Architecture ที่ตอนนี้เป็นมาตรฐาน ประเด็นสำคัญที่ต้องจำ:

New Architecture (JSI, Fabric, TurboModules) เป็นสิ่งบังคับใน React Native 0.87 Bridge แบบเดิมไม่มีอีกต่อไป
JSI เปิดใช้งานการเรียก native แบบ synchronous ใช้อย่างประหยัดสำหรับ operation ที่ต่ำกว่า 16ms
Fabric render UI ใน C++ และ synchronize กับ JavaScript ผ่าน JSI ขจัด bottleneck การ rendering แบบ asynchronous
TurboModules โหลดแบบ lazy และให้ binding ที่ type-safe ที่สร้างจาก TypeScript spec
Expo Router เสนอการนำทางแบบ file-based คล้ายกับ Next.js App Router
React Native Testing Library ทดสอบ component ผ่าน public API และ accessibility tree
แอป production ต้องติดตาม TTI, frame drops, และการใช้หน่วยความจำตั้งแต่วันแรก

เริ่มฝึกซ้อมเลย!

ทดสอบความรู้ของคุณด้วยตัวจำลองสัมภาษณ์และแบบทดสอบเทคนิคครับ

สร้างบัญชีฟรี

การพัฒนาแอปพลิเคชัน React Native 2026: คู่มือฉบับสมบูรณ์และคำถามสัมภาษณ์