React Lifecycle: Class Component vs Functional Component

Kita terkadang bingung dengan cara kerja dari perenderan komponen pada class component dan functional component, akan tetapi jika kita telaah lebih jauh ternyata perbedaannya hanya pada penggunaan lifecycle nya saja.

Perbedaan utama

Perbedaan utama antara lifecycle pada class component dan functional component menggunakan hooks adalah bahwa class component menggunakan metode lifecycle seperti componentDidMount, componentDidUpdate, dan componentWillUnmount, sementara functional component menggunakan hooks seperti useEffect untuk menangani masalah yang sama. Namun, dengan hooks, kita dapat menulis kode yang lebih terstruktur dan terlihat lebih sederhana.

Di bawah ini adalah contoh perbedaan antara lifecycle pada class component dan functional component menggunakan hooks:

Pada Class Component:

class Example extends React.Component {
  componentDidMount() {
    // kode untuk menjalankan saat component telah di-mount
  }
  
  componentDidUpdate(prevProps, prevState) {
    // kode untuk menjalankan saat component telah di-update
  }
  
  componentWillUnmount() {
    // kode untuk menjalankan saat component akan di-unmount
  }
  
  render() {
    return <div>Example</div>;
  }
}

Pada Functional Component + Hooks:

function Example() {
  useEffect(() => {
    // kode untuk menjalankan saat component telah di-mount
    // atau setelah component di-update
    return () => {
      // kode untuk menjalankan saat component akan di-unmount
    }
  }, []);
  
  return <div>Example</div>;
}

Pada functional component dengan hooks, kita dapat menggunakan useEffect untuk menjalankan kode saat component di-mount dan di-update, serta mengembalikan sebuah fungsi untuk menjalankan kode saat component di-unmount. Sedangkan pada class component kita menggunakan metode lifecycle yang berbeda untuk menjalankan kode pada saat yang berbeda.

Dependensi pada useEffect

Jika kita perhatikan, pada parameter kedua useEffect setelah callback pada contoh diatas, ada array kosong, itulah yang kita sebut sebagai Dependensi pada useEffect.

Dependensi pada useEffect adalah sebuah daftar yang berisi variabel yang digunakan dalam efek itu. Setiap kali nilai variabel tersebut berubah, React akan memanggil efek itu kembali. Jika Anda tidak menyertakan daftar dependensi, React akan memanggil efek itu setiap kali component di-render.

Contoh:

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(`Count: ${count}`);
}, [count]);

Dalam contoh di atas, efek akan dijalankan setiap kali nilai dari variabel count berubah. Karena dependensi hanya menyertakan count, React tidak akan memanggil efek itu kembali jika hanya mengubah state lain.

Dependensi juga dapat digunakan untuk mengawasi perubahan pada props.

function Component({id}) {
  useEffect(() => {
    fetchData(id);
  }, [id]);
  return <div>Data: {data}</div>;
}

Kode di atas akan memanggil fetchData saat id berubah. Jika tidak menyertakan dependensi, fetchData akan dipanggil setiap kali component di-render.

Jika tidak ingin mengawasi perubahan pada suatu variabel, bisa menyertakan dependensi dengan nilai kosong.

useEffect(() => {
  console.log("Component did mount");
}, []);

Kode di atas akan menjalankan efek hanya saat component di-mount.

Kesimpulan

Kesimpulannya, React menyediakan metode lifecycle pada class component dan hooks pada functional component untuk menangani peristiwa seperti mount, update, dan unmount. Class component menggunakan metode lifecycle seperti componentDidMount, componentDidUpdate, dan componentWillUnmount. Sedangkan functional component menggunakan hooks seperti useEffect untuk menangani masalah yang sama.

useEffect sendiri adalah hook yang digunakan untuk menjalankan kode saat component di-mount dan di-update, serta mengembalikan sebuah fungsi untuk menjalankan kode saat component di-unmount. Dependensi pada useEffect adalah sebuah daftar yang berisi variabel yang digunakan dalam efek itu, setiap kali nilai variabel tersebut berubah, React akan memanggil efek itu kembali. Dengan menggunakan dependensi, kita dapat mengontrol kapan efek itu dijalankan dan menghindari efek yang tidak diinginkan.

Semoga Bermanfaat!