Yang Saya pelajari hari ini (TIL)

Catatan kaki dan sorotan dari berbagai hal yang Saya pelajari tiap hari.

• 2024-08-25
  • react
  • nextjs

  Di Next.js App Router, error boundary dapat didefinisikan sebagai file dengan konvensi penamaan error.js atau error.tsx. File ini menerima properti reset yang memungkinkan komponen di-render ulang untuk menghilangkan halaman error. Namun, ketika menggunakan reset pada server component, komponen tersebut tidak akan di-reset. Perilaku ini sesuai, karena server component tidak melakukan re-render seperti client component. Sebagai gantinya, perlu menggunakan router.refresh() untuk memuat ulang server component, kemudian memanggil reset() untuk melakukan re-render dan menghilangkan error boundary.

  Masalahnya adalah ketika kedua fungsi ini dipanggil bersamaan, error boundary tidak selalu hilang meskipun langkah-langkah yang dilakukan sudah benar. Hal ini karena router.refresh() mungkin belum selesai (terutama jika ada proses fetching data dari server), sehingga reset() dipanggil pada data yang masih lama. Karena router.refresh() adalah operasi sinkron, await tidak bisa digunakan. Dalam kasus ini, startTransition bisa membantu dengan memungkinkan React menangani pembaruan berdasarkan kapan masing-masing aksi selesai.

  function recover() {
    startTransition(() => {
      router.refresh();
      reset();
    });
  }

• 2024-07-19
  • HTTP
  • API

  Saya sedang membuat API dummy untuk kebutuhan development pribadi menggunakan Elysia. Ketika di localhost, semua berjalan lancar. Namun, saat sudah di-deploy ke production, request ke API endpoint tidak menyematkan cookie berisi token pada request headers. Padahal saya sudah menggunakan konfigurasi credentials: "include". Ternyata masalahnya berada pada konfigurasi cookie di server, yang lupa memberikan flag secure: true. Berikut adalah konfigurasi akhir saya:

  accessToken.set({
  	value: accessJWTToken,
  	httpOnly: true,
  	maxAge: ACCESS_TOKEN_EXP,
      path: "/",
      sameSite: "none",
      secure: true, // should exist
  })

  Untuk keamanan, apabila request dijalankan ke origin yang berbeda, tanpa secure: true, browser akan menolak menyematkan cookie pada request headers.

• 2024-07-15
  • JS
  • react

  Penggunaan useCallback yang tidak hati-hati dapat mengakibatkan memory leak pada aplikasi. Dulu kalau tidak salah saya pernah membaca tentang premature optimization, yaitu optimisasi pada komponen yang tidak terlalu sering dirender ulang atau nggak memiliki komputasi yang berat. Padahal, memoisasi membutuhkan alokasi memori tersendiri yang nggak worth it kalau digunakan untuk mengingat value atau fungsi yang sederhana.

  Saya menemukan artikel bagus tentang memoisasi dengan useCallback, bersanding dengan closure pada Javascript, ternyata dapat menyebabkan kebocoran memori. Baca disini.

• 2024-07-13
  • JS

  Ternyata let dan const di hoisting oleh Javascript. Namun keduanya memiliki restriksi temporal death zone, yang menyebabkan munculnya ReferenceError ketika digunakan sebelum deklarasi, baca artikel ini untuk lebih jelasnya.

• 2024-07-02
  • JS

  Di perusahaan saya yang sebelumnya, saya pernah membuat sebuah carousel yang bisa digeser. Saat itu, saya menangani event touch dan mouse secara terpisah. Ternyata ada PointerEvent yang bisa menangani keduanya, dan sudah ada sejak tahun 2015, haha.

• 2024-06-24
  • pemrograman

  Duplikasi jauh lebih murah dibandingkan abstraksi yang salah.

  Switch statement atau kondisional adalah untuk logika aplikasi, bukan konfigurasi.

  Kedua quote diatas berasal dari tech-talk Sandi Metz's berjudul All the little things, meninjau ulang penerapan prinsip DRY yang jika digunakan dengan tidak hati-hati bisa menjadi bencana. Recommeded untuk ditonton!

• 2024-05-02
  • react
  • nextjs

  Next.js, baik komponen klien maupun server component, dirender di server dan mengirimkan pratinjau HTML statis. "use client" sering kali lebih mudah dipahami jika Anda menganggapnya lebih sebagai "use hydrate".