React Router, bukan lagi sekadar router

Remix • React Router

Karena sering bermain dengan Remix dan sudah meninggalkan SPA, saya tidak pernah lagi bermain React Router. Yaaa meskipun saya masih tahu perkembangannya. Karena Remix dan React Router ini aslinya anak kembar. Kayak Jono dan Lono lah, kembar tapi beda 🫣

Siapa Jono dan Lono gaes? 🤔

Tau Sophia Latjuba? 🙄

Tau dongs 😋

Bagusss… 🙃

Remix, React Router yang mewujud framework

React Router ini satu pengembang dengan Remix gaes. Sementara ini, sasaran penggunanya aja yang beda.

Seperti yang saya sampaikan di awal, Remix dan React Router ini semacam anak kembar tapi beda wujud. Remix berwujud framework, sedangkan React Router berwujud library.

Remix bisa dikatakan juga sebagai wujud baru dari React Router. Kalau dilihat sekilas, kayak gak ada bedanya. Yang paling kentara adalah bagaimana peran framework-nya.

Ya, kalau kalian masih butuh library2 lain untuk melengkapi sistem kerja aplikasi dengan React Router. Di Remix, library2 lain tersebut sudah tidak dibutuhkan lagi. Terlebih lagi, Remix juga mengembalikan pemahaman dasar tentang aplikasi web. Dimana teknologi tidak lagi menyeret keluar pengembang ke dimensi yang jauh dari dimensi web, sebagaimana yang terjadi beberapa tahun terakhir.

React Router, Remix yang mewujud library

Seiring berkembangnya Remix, berkembang pula React Router sebagai library. Keduanya berjalan beriringan. Apa yang ada di React Router saat ini, hasil dari pengembangan Remix. Apa yang potensial di React Router, juga akan disediakan di Remix.

Nyok kita tengok salah satu kesamaannya.

// Remix

// loader-nya
export const loader = () => {
  return json({ capresCollection });
};

// component-nya
export default function VisiMisi() {
  const { capresCollection } = useLoaderData();
}

// --------------------------

// React Router

// deklarasi dan penggunaan router-nya
const router = createBrowserRouter([
  {
    path: '/',
    Component: VisiMisi,
    loader: () => {
      return { capresCollection };
    },
  },
]);
<RouterProvider router={router} />

// component-nya
export default function VisiMisi() {
  const { capresCollection } = useLoaderData();
}

Remix sebagai framework, tidak ada lagi deklarasi router seperti halnya React Router. Tapi keduanya memiliki pendekatan yang sama, misalnya dalam hal loading data.

Loader adalah fungsi untuk mengakses data yang akan digunakan di komponen. Baik Remix maupun React Router, loader dieksekusi sebelum komponen dirender. Jika ada beberapa komponen yang terpengaruh URL, maka loader di beberapa komponen tersebut dieksekusi paralel. Saat semua loader selesai dieksekusi, baru setelah itu beberapa komponen tersebut akan dirender bersamaan.

Untuk cara pakai data dari loader pun juga sama, yaitu menggunakan hook useLoaderData(). Nikmat ber-React mana yang kalian dustakan gaes 🙃

Kesimpulan

React Router yang sekarang emang udah beda gaes. Dulu, ketergantungannya dengan library lain misalnya React Query (sekarang menjadi TanStack Query) sepertinya tidak bisa dihindari. Namun sekarang tidak lagi. Bahkan justru menjadi lebih baik jika tidak menggunakan React Query.

React Router menjelma menjadi Remix dalam wujud library. Nilai inti dari Remix berhasil diekstrak untuk dimanfaatkan di luar Remix. Alhasil, Remix punya kepanjangan tangan yang tidak mudah untuk ditolak jika kalian menggunakan Vite atau Parcel.

Lalu, bagaimana kabar pengguna React Router saat ini? Sudah kah kalian upgrade? Masih kah kalian menggunakan React Query?

Berikut contoh React Router menggunakan Vite dari tulisan React key, solusi rerender uncontrolled component. ☕️