ReactJS - Modus Ketat: Panduan untuk Pemula

Hai, para pengembang React masa depan! Hari ini, kita akan mendalami fitur penting tapi seringkali dilewati dalam React: Modus Ketat. Jangan khawatir jika Anda baru dalam programming - saya akan mengarahkan Anda melalui konsep ini step by step, seperti yang saya lakukan untuk ribuan siswa selama tahun-tahun mengajar. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai petualangan belajar ini bersama!

Apa Itu Modus Ketat?

Sebelum kita memasuki hal-hal spesifik, mari kita pahami apa itu Modus Ketat dalam React. Bayangkan Anda belajar mengemudi. Modus Ketat seperti memiliki seorang instruktur mengemudi yang sangat teliti duduk di sebelah Anda, menunjukkan setiap kesalahan kecil yang Anda buat. Itu bukan untuk mengecam Anda, tapi untuk membantu Anda menjadi pengemudi yang lebih baik - atau dalam kasus kita, pengembang React yang lebih baik.

Modus Ketat adalah sebuah alat untuk menyorot masalah potensial dalam aplikasi Anda. Itu mengaktifkan pemeriksaan dan peringatan tambahan untuk keturunannya. mari kita lihat bagaimana menggunakannya:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Dalam contoh ini, kita mengelilingi komponen App keseluruhan dengan React.StrictMode. Ini berarti semua komponen di dalam App akan dikaji oleh pemeriksaan tambahan ini.

Sekarang, mari kita jelajahi apa yang benar-benar dicek oleh Modus Ketat.

Penggunaan Lifecycle yang Tidak Aman

Apa Itu Lifecycles?

Sebelum kita membahas lifecycle yang tidak aman, mari kita pahami apa itu lifecycle. Dalam React, komponen melalui beberapa tahap dari lahir (mounting) sampai mati (unmounting). Tahap-tahap ini disebut lifecycle.

Lifecycle yang Tidak Aman

Beberapa metode lifecycle dianggap tidak aman karena mereka dapat menyebabkan bug dalam rendering asinkron. Modus Ketat membantu mengidentifikasi penggunaannya. Ini adalah contoh:

class OldComponent extends React.Component {
componentWillMount() {
console.log("Metode ini tidak aman!");
}

render() {
return <div>Hallo, saya adalah komponen lama!</div>;
}
}

Jika Anda menggunakan komponen ini dalam Modus Ketat, Anda akan melihat peringatan di console tentang penggunaan metode componentWillMount yang tidak aman.

Sebagai ganti, Anda seharusnya menggunakan alternatif yang lebih aman. Ini adalah tabel metode yang tidak aman dan alternatif amannya:

Metode Tidak Aman	Alternatif Aman
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Penggunaan API Ref Legacy

Apa Itu Refs?

Refs menyediakan cara untuk mengakses node DOM atau elemen React yang diciptakan dalam metode render. Mereka seperti jalur langsung ke bagian tertentu dari UI Anda.

Ref String (Legacy)

Dalam masa lalu, refs dibuat menggunakan string, seperti ini:

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Klik saya!</button>;
}
}

Metode ini dianggap legacy dan dapat menyebabkan masalah. Modus Ketat akan memperingatkan Anda jika Anda menggunakan ref string.

Penggunaan Ref Modern

Sebagai ganti, Anda seharusnya menggunakan API createRef atau hook useRef:

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Klik saya!</button>;
}
}

Dalam contoh ini, kita menggunakan React.createRef() untuk membuat ref, yang jauh lebih aman dan efisien.

Penggunaan findDOMNode Legacy

Apa Itu findDOMNode?

findDOMNode adalah metode yang digunakan untuk mencari pohon DOM untuk instance komponen React tertentu. Namun, itu sekarang ditinggalkan karena masalah potensial yang dapat ditimbulkannya.

Contoh Penggunaan findDOMNode

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>Saya akan menjadi merah!</div>;
}
}

Kode ini akan mengubah warna latar belakang div menjadi merah. Namun, menggunakan findDOMNode seperti ini adalah hal yang tidak disarankan, dan Modus Ketat akan memperingatkan Anda tentangnya.

Alternatif Modern

Sebagai ganti findDOMNode, Anda seharusnya menggunakan refs:

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>Saya akan menjadi biru!</div>;
}
}

Ini mencapai hasil yang sama tapi dalam cara yang lebih aman dan lebih ramah React.

Kesimpulan

Dan begitu saja, teman-teman! Kita telah melakukan perjalanan melalui negeri Modus Ketat React, menjelajahi peringatan tentang lifecycle yang tidak aman, penggunaan ref legacy, dan metode findDOMNode yang ditinggalkan. Ingat, Modus Ketat adalah alat pengembang teman sekitar Anda, selalu ada untuk membantu Anda menulis kode yang lebih baik dan lebih aman.

Saat kita mengakhiri, saya teringat tentang seorang siswa yang pernah mengatakan kepadaku, "React seperti seorang orang tua yang ketat tapi peduli - itu menetapkan aturan untuk menjaga kita aman, tapi juga memberikan kebebasan untuk menciptakan hal-hal yang menakjubkan." Saya sepenuhnya setuju!

Tetap latih, terus belajar, dan terutama, terus mengoding. Sampaijumpa lagi, selamat belajar React!

Credits: Image by storyset