State Management di React Native

Konsep state management di React Native sama dengan React web. Yang berbeda hanyalah pertimbangan performa karena resource mobile lebih terbatas.

useState — Local State

import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text style={{ fontSize: 48 }}>{count}</Text>
      <Pressable onPress={() => setCount(c => c + 1)}>
        <Text>+ Tambah</Text>
      </Pressable>
    </View>
  );
}

useContext — Shared State

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [dark, setDark] = useState(false);

  return (
    <ThemeContext.Provider value={{ dark, toggleTheme: () => setDark(d => !d) }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

// Di komponen manapun:
function Header() {
  const { dark, toggleTheme } = useTheme();
  return (
    <Pressable onPress={toggleTheme}>
      <Text>{dark ? '🌙' : '☀️'} Toggle Theme</Text>
    </Pressable>
  );
}

Zustand — Lightweight Global State

// store/useCartStore.ts
import { create } from 'zustand';

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  total: () => number;
}

export const useCartStore = create<CartStore>((set, get) => ({
  items: [],
  addItem: (item) => set((state) => ({
    items: [...state.items, item],
  })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter((i) => i.id !== id),
  })),
  total: () => get().items.reduce((sum, i) => sum + i.price, 0),
}));

// Di komponen:
function CartBadge() {
  const count = useCartStore((s) => s.items.length);
  return <Text>Cart ({count})</Text>;
}

Tips Performa State di Mobile

• Selektif subscribe — Zustand selector mencegah re-render tidak perlu
• Pisah state kecil — Jangan satu store raksasa, bagi per domain
• Hindari deep nesting — Flatten state structure untuk update cepat
• useMemo/useCallback — Cegah recomputation di list item yang banyak