React 18 dan Susahnya useEffect

React JS dikenal dengan sebuah unopiniated library javascript yang dibuat untuk membuat sebuah antarmuka berbasis web akhir - akhir ini agak cukup menghebohkan para pengembang pada versi terbarunya yaitu versi 18 dan anda dapat melihat release notenya pada blog nya dan melihat cara upgrade ke versi 17 melalui blog nya. Jika dilihat terdapat beberapa pembaruan pada penambahan API baru, pembaruan pada server side rendering, pengenalan automatic batching dan pembaruan perlakukan pada mode strict.

Dari keempat poin pembaruan tersebut terdapat satu pembaruan yang cukup major dilakukan oleh reactjs yang memungkinkan sebuah pengembang dalam memastikan kembali component yang di render telah benar dan tidak menimalkan terjadinya bug karena leaking memory dan lain sebagainya. Iya hal tersebut berkaitan dengan pembaruan perlakukan pada mode strict.

Sebelum Update

Sebelum mode strict belum diupdate atau pada versi dibawah 18 atau react js versi 17, setiap komponen yang pada react js akan mengalami dua fase yaitu fase ketika layout telah di render dan fase ketika useEffect diterapkan.

import { useEffect } from "react";
import "./styles.css";

export default function App() {
  console.log("Render layout");

  useEffect(() => {
    console.log("OK");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Setelah Update

Setelah update react 18 muncul terdapat perubahan pada mode strict yang tujuannya melakukan simulasi pada sebuah component yang dibuat ketika sebuah component di re-mounting pada sebuah layout sehingga nanti pengembang akan mengetahui apakah component tersebut akan memicu terjadinya memory leak, kesalahan state dan bug - bug lainnya. Pada contoh diatas kode yang digunakan tidaklah berbeda ketika berada pada kondisi sebelum update, namun jika kalian lihat pada console browser maka terjadi semacam anomali yang membuat sebuah perintah seperti contohnya console.log dieksekusi sebanyak dua kali padahal baris kode yang di tulis hanya satu. Meskipun begitu ini hanya terjadi pada fase pengembangan sehingga pada fase production hal ini tidak akan terjadi. Meskipun begitu hal ini justru membuat pengembangan justru lebih sulit karena memungkinkan sebuah bug yang seharusnya tidak terjadi namun malah terjadi.

Implementasi Solusi

Karena react pada versi 18 menerapkan sebuah simulasi remounting pada sebuah component, hal ini justru mendorong para pengguna react js untuk menerapkan clean up function agar nantinya component tersebut tidak memiliki dampak ke component lain.

  useEffect(() => {
    console.log("Mounting");
    return () => {
      console.log("Unmounting");
    };
  }, []);

Namun dalam beberapa skenario seperti melakukan fetching pada API untuk interaksi ke server membutuhkan implementasi yang cukup rumit seperti penggunaan AbortController pada web browser.

Menggunakan useRef

Pada simulasi remounting component ini seluruh state beserta layout akan mengalami perubahan, namun kita dapat menggunakan useRef untuk mempertahankan sebuah value ketika component tersebut mengalami remounting. Sejatinya useRef adalah sebuah wadah yang berisi data yang dapat digunakan meskipun mengalami re-render saat terjadinya simulasi remounting ini, namun useRef tidak dapat berefek langsung ke berubahan DOM sehingga penggunaannya sangat cocok untuk memanggil sebuah element. Kalian juga dapat menggunakan useRef untuk menangani masalah double effect atau double fetch atau sejenisnya yang berkaitan pada useEffect yang berjalan dua kali, hanya saja kesalahan penggunaan mungkin akan berakibat kode pada useEffect tidak bekerja.

  const booted = useRef(false);

  useEffect(() => {
    if (!booted.current) {
      booted.current = true;
      console.log("Hello World");
    }
  }, [booted]);

Pada skenario diatas dapat dijelaskan bahwa console.log('Hello World') dapat bekerja hanya sekali karena terdapat sebuah validasi pada useRef booted, ketika useRef booted memiliki nilai false maka blok kode yang di dalamnya akan dikerjakan dan value booted diganti menjadi true. Ketika useRef booted bernilai true maka blok kode didalamnya tidak akan dijalankan. Meskipun begitu saya sebagai penulis juga meragukan cara ini karena jika suatu saat nilai pada sebuah state tidak dapat dipertahankan pada versi selanjutnya, hal ini justru menjadi sebuah bug baru yang justru membuat hampir seluruh blok kode tidak akan berjalan dengan baik.

Kesimpulan

Dari pikiran - pikiran yang sudah saya tuliskan sebelumnya saya dapat simpulkan bahwa pembaruan ini kadang bisa menjadi pro dan kontra dimana pronya adalah untuk mengetahui apakah component tersebut telah di render dengan benar tanpa adanya bug dan kontranya adalah fungsi ini hanya berfungsi pada mode pengembangan sehingga jika pada mode production simulasi ini tidak akan bekerja hal ini yang membuat kesannya seperti buang - buang tenaga.