ReactJS - Mode Ketat: Panduan untuk Pemula

Halo, pengembang React masa depan! Hari ini, kita akan mendalamkan sebuah fitur penting tapi seringkali dilewatkan dalam React: Mode Ketat. Jangan khawatir jika Anda baru dalam programming - saya akan mengarahkan Anda melalui konsep ini secara langkah demi langkah, seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Jadi, ambillah secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita mulai petualangan belajar ini bersama!

Apa Itu Mode Ketat?

Sebelum kita masuk ke dalam hal-hal khusus, mari kita mengerti apa itu Mode Ketat dalam React. Bayangkan Anda belajar mengemudi. Mode Ketat seperti memiliki seorang instruktur mengemudi yang sangat teliti duduk di sebelah Anda, menunjukkan setiap kecil kesalahan yang Anda buat. Itu bukan untuk mencela Anda, tapi untuk membantu Anda menjadi pengemudi yang lebih baik - atau dalam kasus kita, pengembang React yang lebih baik.

Mode 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 membungkus 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 Mode Ketat.

Penggunaan Lifecycle Tidak Aman

Apa Itu Lifecycles?

Sebelum kita membahas lifecycles yang tidak aman, mari kita mengerti apa itu lifecycles. Dalam React, komponen melalui beberapa tahap dari kelahiran (mounting) ke kematian (unmounting). Tahap-tahap ini disebut lifecycles.

Lifecycles Tidak Aman

Beberapa metode lifecycle dianggap tidak aman karena mereka dapat menyebabkan bug dalam rendering asinkron. Mode Ketat membantu mengidentifikasi penggunaannya. Ini 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 Mode Ketat, Anda akan melihat peringatan di console tentang penggunaan metode componentWillMount yang tidak aman.

Sebagai ganti, Anda seharusnya menggunakan alternatif yang lebih aman. Ini 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 dibuat dalam metode render. Mereka seperti sebuah jalur langsung ke bagian tertentu dari UI Anda.

Ref String (Legacy)

Di 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. Mode 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 ditimbulkan.

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 yang tidak disarankan, dan Mode 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 begitulah, teman-teman! Kita telah berpetualang melalui negeri Mode Ketat React, mengexploreasi peringatan tentang penggunaan lifecycle yang tidak aman, penggunaan ref legacy, dan metode findDOMNode yang ditinggalkan. Ingat, Mode Ketat adalah alat pengembang tetangga Anda, selalu ada untuk membantu Anda menulis kode yang lebih baik dan lebih aman.

Sementara kita bersama, saya teringat tentang seorang murid yang pernah mengatakan kepadaku, "React seperti seorang orangtua ketat tapi peduli - itu menetapkan aturan untuk menjaga kita aman, tetapi juga memberikan kebebasan untuk menciptakan hal-hal yang menakjubkan." Saya setuju sepenuhnya!

Teruslatih, terus belajar, dan yang paling penting, terus mengoding. Sampai jumpa lagi, selamat React-ing!

Credits: Image by storyset