STATE-MANAGEMENT FRONTEND REACT JAVASCRIPT TYPESCRIPT DESIGN-PATTERNS DATA-CONSISTENCY ERROR-HANDLING UI-UX SOFTWARE-ARCHITECTURE ATOMIC-UPDATES ROLLBACK OPTIMISTIC-UI

Manajemen State Transaksional di Frontend: Membangun UI yang Konsisten dan Tahan Error

⏱️ 17 menit baca
👨‍💻

Manajemen State Transaksional di Frontend: Membangun UI yang Konsisten dan Tahan Error

1. Pendahuluan

Pernahkah Anda berhadapan dengan situasi di mana pengguna melakukan serangkaian tindakan di aplikasi web Anda, lalu tiba-tiba terjadi error di tengah jalan, dan UI menjadi “setengah jadi” atau tidak konsisten? Data yang ditampilkan tidak lagi mencerminkan kondisi sebenarnya, atau bahkan lebih parah, menimbulkan bug baru. Ini adalah masalah umum dalam aplikasi frontend yang kompleks, terutama saat melibatkan banyak state dan interaksi yang saling bergantung.

Di dunia database, kita punya konsep transaksi. Serangkaian operasi digabungkan menjadi satu unit logis. Jika semua operasi berhasil, transaksi akan di-commit dan semua perubahan diterapkan secara permanen. Namun, jika ada satu saja operasi yang gagal, seluruh transaksi akan di-rollback, mengembalikan database ke kondisi semula seolah-olah tidak ada yang terjadi. Inilah yang dikenal sebagai properti ACID: Atomicity, Consistency, Isolation, Durability.

Bagaimana jika kita bisa menerapkan mentalitas transaksional ini pada state di frontend kita? Bayangkan Anda sedang mengisi formulir multi-step yang panjang, mengelola item dalam keranjang belanja, atau melakukan operasi drag-and-drop yang kompleks. Jika ada error validasi di langkah terakhir formulir, atau koneksi terputus saat menyimpan keranjang, kita ingin UI kembali ke kondisi sebelumnya yang valid, bukan terjebak di kondisi yang tidak jelas.

Manajemen state transaksional di frontend adalah tentang membangun UI yang lebih konsisten, tahan error, dan memberikan pengalaman pengguna yang lebih baik dengan kemampuan untuk mengelompokkan perubahan state dan membatalkannya jika diperlukan. Mari kita selami lebih dalam!

2. Memahami Konsep Transaksi di Frontend State

Mari kita adaptasi properti ACID ke konteks frontend:

Bagaimana ini berbeda dari update state biasa? Update state biasa (misalnya setState di React) langsung mengubah state dan memicu re-render. Ini cocok untuk perubahan state tunggal atau sederhana. Namun, untuk serangkaian perubahan yang saling terkait dan harus berhasil bersamaan, atau yang mungkin perlu dibatalkan, pendekatan transaksional memberikan lapisan keamanan dan kontrol yang lebih tinggi.

3. Studi Kasus: Formulir Multi-Step dengan State Transaksional

📌 Mari kita ambil contoh nyata: Anda sedang membangun formulir pendaftaran akun yang terdiri dari tiga langkah:

  1. Informasi Personal: Nama, Email.
  2. Detail Alamat: Jalan, Kota, Kode Pos.
  3. Preferensi: Langganan Newsletter, Notifikasi.

Setiap langkah memiliki validasinya sendiri. Setelah mengisi langkah 1, pengguna pindah ke langkah 2. Jika di langkah 3, pengguna memutuskan untuk membatalkan pendaftaran atau ada error saat menyimpan data ke backend, kita ingin semua input dari langkah 1 dan 2 juga dibersihkan, mengembalikan formulir ke kondisi awal yang bersih.

❌ Masalah Tanpa Transaksi: Jika setiap langkah langsung memperbarui state utama, dan ada error di langkah 3 (misalnya, API gagal), data dari langkah 1 dan 2 sudah terlanjur tersimpan di state. Pengguna akan melihat formulir yang “setengah terisi” atau harus me-refresh halaman. Ini adalah pengalaman yang buruk dan potensi data inkonsisten.

✅ Solusi dengan Transaksi: Kita bisa memulai transaksi saat pengguna memulai formulir. Setiap kali pengguna mengisi sebuah langkah, perubahannya disimpan dalam “draft” state. Jika pengguna berhasil menyelesaikan semua langkah dan data berhasil disimpan ke backend, kita commit transaksi. Jika ada pembatalan atau error, kita rollback transaksi, membuang semua perubahan draft dan mengembalikan state formulir ke kondisi sebelum transaksi dimulai.

4. Strategi Implementasi Sederhana (Vanilla JS / React Context)

Untuk mengimplementasikan transaksi, kita memerlukan beberapa komponen inti:

  1. State Asli: Kondisi state sebelum transaksi dimulai.
  2. Draft State: Kondisi state yang sedang dimodifikasi selama transaksi.
  3. Fungsi startTransaction(): Menyimpan salinan state asli dan membuat draft state.
  4. Fungsi updateDraft(): Mengubah draft state.
  5. Fungsi commitTransaction(): Menerapkan perubahan dari draft state ke state asli.
  6. Fungsi rollbackTransaction(): Membuang draft state dan mengembalikan state asli.

💡 Contoh Pseudo-Code dengan React Context:

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

const TransactionContext = createContext(null);

export function TransactionProvider({ children }) {
  const [appState, setAppState] = useState({ /* initial application state */ });
  const draftState = useRef(null); // Menyimpan draft state
  const originalStateSnapshot = useRef(null); // Snapshot state sebelum transaksi

  const startTransaction = () => {
    originalStateSnapshot.current = appState; // Simpan snapshot state saat ini
    draftState.current = { ...appState }; // Buat salinan untuk draft
    console.log("Transaksi dimulai. Snapshot:", originalStateSnapshot.current);
  };

  const updateDraft = (updates) => {
    if (!draftState.current) {
      console.warn("Tidak ada transaksi yang aktif. Mulai transaksi terlebih dahulu.");
      return;
    }
    draftState.current = { ...draftState.current, ...updates };
    console.log("Draft diperbarui:", draftState.current);
    // Mungkin kita ingin memicu re-render parsial di sini untuk UI yang sedang diedit
    // setAppState(draftState.current); // HATI-HATI: Ini akan menampilkan draft ke UI utama
  };

  const commitTransaction = () => {
    if (!draftState.current) {
      console.warn("Tidak ada transaksi yang aktif untuk di-commit.");
      return;
    }
    setAppState(draftState.current); // Terapkan perubahan draft ke state utama
    draftState.current = null; // Bersihkan draft
    originalStateSnapshot.current = null; // Bersihkan snapshot
    console.log("Transaksi di-commit. State utama diperbarui:", appState);
  };

  const rollbackTransaction = () => {
    if (!originalStateSnapshot.current) {
      console.warn("Tidak ada transaksi yang aktif untuk di-rollback.");
      return;
    }
    setAppState(originalStateSnapshot.current); // Kembalikan ke state sebelum transaksi
    draftState.current = null; // Bersihkan draft
    originalStateSnapshot.current = null; // Bersihkan snapshot
    console.log("Transaksi di-rollback. State utama dikembalikan:", appState);
  };

  const value = {
    appState,
    draftState: draftState.current, // Expose draft state for components to read
    startTransaction,
    updateDraft,
    commitTransaction,
    rollbackTransaction,
  };

  return <TransactionContext.Provider value={value}>{children}</TransactionContext.Provider>;
}

export function useTransaction() {
  const context = useContext(TransactionContext);
  if (!context) {
    throw new Error('useTransaction must be used within a TransactionProvider');
  }
  return context;
}

Dalam contoh di atas, kita menggunakan useRef untuk draftState dan originalStateSnapshot agar tidak memicu re-render saat mereka berubah (kecuali saat setAppState dipanggil). Komponen yang membutuhkan state transaksional akan menggunakan useTransaction().

⚠️ Tantangan:

5. Memanfaatkan Library untuk Kemudahan (Immer.js, Zustand/Jotai dengan Middleware)

Untuk mengatasi tantangan di atas, kita bisa memanfaatkan library yang dirancang untuk mempermudah manajemen state imutabel dan reaktif.

5.1 Immer.js: Mempermudah Kerja dengan Immutable Data

Immer.js memungkinkan kita untuk bekerja dengan state imutabel seolah-olah kita memutasinya secara langsung. Immer akan melacak semua perubahan pada “draft” dan menghasilkan state baru yang imutabel. Ini sangat cocok untuk pola transaksional.

import produce from 'immer';

// Contoh state awal
const initialState = {
  user: {
    name: 'Budi',
    email: 'budi@example.com',
  },
  cart: [],
};

let draft = null; // Untuk menyimpan state draft
let originalSnapshot = null; // Untuk snapshot state sebelum transaksi

function startFrontendTransaction(currentState) {
  originalSnapshot = currentState;
  // Immer akan membuat draft yang bisa dimutasi
  draft = produce(currentState, (d) => d); // Salinan awal untuk draft
}

function updateFrontendDraft(mutatorFn) {
  if (!draft) {
    console.warn("No active transaction to update.");
    return;
  }
  // MutatorFn akan menerima draft yang bisa dimutasi
  draft = produce(draft, mutatorFn);
}

function commitFrontendTransaction() {
  if (!draft) {
    console.warn("No active transaction to commit.");
    return null;
  }
  const newState = draft; // Draft kini adalah state baru yang imutabel
  draft = null;
  originalSnapshot = null;
  return newState;
}

function rollbackFrontendTransaction() {
  if (!originalSnapshot) {
    console.warn("No active transaction to rollback.");
    return null;
  }
  const rolledBackState = originalSnapshot;
  draft = null;
  originalSnapshot = null;
  return rolledBackState;
}

// --- Penggunaan ---
let currentState = initialState;
console.log("Initial state:", currentState);

startFrontendTransaction(currentState);
updateFrontendDraft((d) => {
  d.user.name = 'Budi Santoso';
  d.user.email = 'budi.santoso@example.com';
  d.cart.push({ id: 1, name: 'Laptop' });
});

console.log("State setelah update draft (masih imutabel):", currentState);
console.log("Draft state saat ini:", draft); // draft adalah objek baru yang imutabel

// Jika ada error, kita bisa rollback
// currentState = rollbackFrontendTransaction();
// console.log("State setelah rollback:", currentState);

// Jika berhasil, kita commit
currentState = commitFrontendTransaction();
console.log("State setelah commit:", currentState);

5.2 Integrasi dengan Zustand (atau State Management Library Lain)

Kita bisa membungkus logika transaksional ini dalam custom hook atau middleware di library state management seperti Zustand.

import { create } from 'zustand';
import { produce } from 'immer';

// Definisi store Zustand
const useFormStore = create((set, get) => ({
  formData: {
    personal: { name: '', email: '' },
    address: { street: '', city: '', zip: '' },
    preferences: { newsletter: false, notifications: false },
  },
  // Untuk menyimpan draft state dan snapshot sebelum transaksi
  _draftData: null,
  _originalDataSnapshot: null,

  // Memulai transaksi
  startTransaction: () => {
    const currentData = get().formData;
    set({
      _originalDataSnapshot: currentData,
      _draftData: produce(currentData, (d) => d), // Buat salinan draft
    });
    console.log("Transaksi formulir dimulai.");
  },

  // Memperbarui draft state
  updateDraft: (mutator) => {
    set(state => {
      if (!state._draftData) {
        console.warn("Tidak ada transaksi aktif. Mulai transaksi terlebih dahulu.");
        return {};
      }
      return { _draftData: produce(state._draftData, mutator) };
    });
  },

  // Meng-commit transaksi
  commitTransaction: () => {
    set(state => {
      if (!state._draftData) {
        console.warn("Tidak ada transaksi aktif untuk di-commit.");
        return {};
      }
      console.log("Transaksi formulir di-commit.");
      return {
        formData: state._draftData,
        _draftData: null,
        _originalDataSnapshot: null,
      };
    });
  },

  // Meng-rollback transaksi
  rollbackTransaction: () => {
    set(state => {
      if (!state._originalDataSnapshot) {
        console.warn("Tidak ada transaksi aktif untuk di-rollback.");
        return {};
      }
      console.log("Transaksi formulir di-rollback.");
      return {
        formData: state._originalDataSnapshot,
        _draftData: null,
        _originalDataSnapshot: null,
      };
    });
  },
}));

// Custom hook untuk mengakses state dan fungsi transaksi
export const useTransactionalForm = () => {
  const { formData, _draftData, startTransaction, updateDraft, commitTransaction, rollbackTransaction } = useFormStore();
  return {
    formData: _draftData || formData, // Selalu berikan draft jika ada transaksi aktif
    startTransaction,
    updateDraft,
    commitTransaction,
    rollbackTransaction,
    isTransactionActive: !!_draftData,
  };
};

// --- Contoh Komponen React ---
function MyMultiStepForm() {
  const { formData, startTransaction, updateDraft, commitTransaction, rollbackTransaction, isTransactionActive } = useTransactionalForm();
  const [step, setStep] = useState(0);

  useEffect(() => {
    // Mulai transaksi saat form dimuat atau saat memulai langkah pertama
    if (step === 0 && !isTransactionActive) {
      startTransaction();
    }
  }, [step, isTransactionActive, startTransaction]);

  const handleNext = () => {
    // Lakukan validasi untuk step saat ini
    // ...
    setStep(prev => prev + 1);
  };

  const handleBack = () => {
    setStep(prev => prev - 1);
  };

  const handleSubmit = async () => {
    try {
      // Kirim formData ke backend
      console.log("Mengirim data ke backend:", formData);
      await new Promise(resolve => setTimeout(resolve, 1000)); // Simulasi API call
      // Jika berhasil, commit transaksi
      commitTransaction();
      alert("Formulir berhasil disimpan!");
      setStep(0); // Kembali ke awal
    } catch (error) {
      console.error("Gagal menyimpan formulir:", error);
      rollbackTransaction(); // Jika gagal, rollback
      alert("Terjadi error, formulir dikembalikan ke kondisi awal.");
      setStep(0); // Kembali ke awal
    }
  };

  const handleCancel = () => {
    rollbackTransaction();
    alert("Formulir dibatalkan.");
    setStep(0); // Kembali ke awal
  };

  return (
    <div>
      <h1>Formulir Pendaftaran</h1>
      <p>Langkah: {step + 1}</p>
      {step === 0 && (
        <div>
          <h2>Informasi Personal</h2>
          <input
            type="text"
            placeholder="Nama"
            value={formData.personal.name}
            onChange={(e) => updateDraft(d => { d.personal.name = e.target.value; })}
          />
          <input
            type="email"
            placeholder="Email"
            value={formData.personal.email}
            onChange={(e) => updateDraft(d => { d.personal.email = e.target.value; })}
          />
          <button onClick={handleNext}>Berikutnya</button>
        </div>
      )}
      {step === 1 && (
        <div>
          <h2>Detail Alamat</h2>
          <input
            type="text"
            placeholder="Jalan"
            value={formData.address.street}
            onChange={(e) => updateDraft(d => { d.address.street = e.target.value; })}
          />
          <button onClick={handleBack}>Kembali</button>
          <button onClick={handleNext}>Berikutnya</button>
        </div>
      )}
      {step === 2 && (
        <div>
          <h2>Preferensi</h2>
          <label>
            <input
              type="checkbox"
              checked={formData.preferences.newsletter}
              onChange={(e) => updateDraft(d => { d.preferences.newsletter = e.target.checked; })}
            />
            Langganan Newsletter
          </label>
          <button onClick={handleBack}>Kembali</button>
          <button onClick={handleSubmit}>Simpan</button>
        </div>
      )}
      <hr />
      {isTransactionActive && <button onClick={handleCancel}>Batalkan Formulir</button>}
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
}

Dalam contoh ini:

6. Praktik Terbaik dan Pertimbangan

🎯 Kapan Menggunakan Transaksi vs. Update State Biasa:

⚠️ Manajemen Error dan Retry:

🔗 Integrasi dengan API Backend:

🚀 Performa:

🧪 Testing: