Pengertian State dan Lifecycle pada React JS

Pada artikel kali ini, kita akan belajar bagaimana cara membuat komponen Clock yang bersifat reusable atau bisa digunakan kembali dan dapat dienkapsulasi. Ini akan mengatur timer sendiri dan memperbarui sendiri setiap detik.

Kita bisa mulai dengan merangkum bagaimana tampilan jamnya :

function Clock(props) {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {props.date.toLocaleTimeString()}.</h2>

</div>

);

}

function tick() {

ReactDOM.render(

<Clock date={new Date()} />,

document.getElementById(‘root’)

);

}

setInterval(tick, 1000);

Namun, ia melewatkan persyaratan penting: fakta bahwa Jam mengatur timer dan memperbarui UI setiap detik harus menjadi detail implementasi Clock.

Idealnya kita ingin menulis ini sekali saja dan jamnya akan diperbarui secara otomatis :

ReactDOM.render(

<Clock />,

document.getElementById(‘root’)

);

Untuk mengimplementasikan ini, kita perlu menambahkan “state” ke komponen Clock.

State mirip dengan Props, tetapi bersifat pribadi dan sepenuhnya dikendalikan oleh komponen.

Baca Juga :

Mengubah Function menjadi Class

Kamu bisa mengubah komponen Function contohnya Clock menjadi class dalam 5 langkah :

Membuat ES6 Class, dengan nama yang sama serta mengandung React.Component.
Tambahkan method kosong dibawahnya dan beri nama render()
Pindahkan bagian body function ke method render()
Ganti Props menjadi this.props dibagian render()
Hapus sisa deklarasi function lain yang tidak terpakai

class Clock extends React.Component {

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.props.date.toLocaleTimeString()}.</h2>

</div>

);

}

Output :

Jika output diatas kamu lihat di browser kamu, maka tampilan jamnya akan selalu berubah-ubah layaknya jam sungguhan.

Method render akan dipanggil setiap kali pembaruan terjadi, tetapi selama kita render <Clock /> ke dalam node DOM yang sama, hanya satu instance class clock yang akan digunakan. Ini memungkinkan kami menggunakan fitur tambahan seperti local state dan metode lifecycle.

Baca Juga : Tutorial Install React JS dan Membangun Project Baru!

Menambahkan Local State ke dalam Class

Kita akan memindahkan date dari Props ke State dalam 3 langkah :

1. Ganti this.props.date dengan this.state.date pada bagian method render() :

class Clock extends React.Component {

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

2. Tambahkan class constructor pada bagian this.state :

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

3. Hilangkan prop date pada bagian element <clock/> :

ReactDOM.render(

<Clock />,

document.getElementById(‘root’)

);

Kemudian kita akan menambahkan kode timer kembali ke komponen itu sendiri.

Baca Juga :

Hasilnya terlihat seperti ini:

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

ReactDOM.render(

<Clock />,

document.getElementById(‘root’)

);

Menambahkan Method Lifecycle ke dalam Class

Dalam aplikasi dengan banyak komponen, sangat penting untuk membebaskan sumber daya yang diambil oleh komponen saat dihapus.

Kita bisa mengatur timer kapan saja Clock dirender ke DOM untuk pertama kalinya. Ini disebut “mounting” di dalam React.

Kita juga bisa menghapus timer tersebut kapan saja DOM yang dihasilkan oleh Clock dihapus. Hal Ini disebut “unmount” di React.

Kita dapat mendeklarasikan special method pada kelas komponen untuk menjalankan beberapa kode ketika komponen di mount dan unmount :

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

componentDidMount() {

}

componentWillUnmount() {

}

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

Metode ini disebut “Lifecycle Method”.

Baca Juga : 10 Keuntungan Menggunakan React JS Pada Desain Website

Method componentDidMount () berjalan setelah output komponen telah dirender ke DOM. Ini adalah tempat yang bagus untuk mengatur timer :

componentDidMount() {

this.timerID = setInterval(

() => this.tick(),

1000

);

}

Meskipun this.props diatur oleh React sendiri dan this.state memiliki arti khusus, Kamu bisa dengan bebas untuk menambahkan bidang tambahan ke class secara manual jika kamu perlu menyimpan sesuatu yang tidak berpartisipasi dalam data flow (seperti ID pengatur waktu ).

kita akan menghapus timer dalam Lifecycle Method ComponenWillUnmount () :

componentWillUnmount() {

clearInterval(this.timerID);

}

Selanjutnya, kita akan menerapkan method yang disebut tick () agar komponen Clock berjalan setiap detiknya.

Method tick() menggunakan this.setState () untuk menjadwalkan pembaruan ke local state komponen :

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

componentDidMount() {

this.timerID = setInterval(

() => this.tick(),

1000

);

}

componentWillUnmount() {

clearInterval(this.timerID);

}

tick() {

this.setState({

date: new Date()

});

}

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

ReactDOM.render(

<Clock />,

document.getElementById(‘root’)

);

Output :

Sekarang Output Clock akan terus berdetak setiap detiknya jika kamu buka dibrowser kamu.

Baca Juga : Begini Nih Cara Scroll View pada React Native Yang Benar

Mari kita rekap dengan cepat apa yang sedang terjadi dan urutan method apa saja yang dipanggil :

Ketika <Clock /> diteruskan ke ReactDOM.render (), React memanggil konstruktor komponen Clock. Karena Clock perlu menampilkan waktu saat ini, itu menginisialisasi this.state dengan objek termasuk waktu saat ini.
React lalu memanggil metode render () di komponen Clock. Beginilah React mempelajari apa yang harus ditampilkan di layar. React kemudian memperbarui DOM agar sesuai dengan output yang dirender Clock.
Ketika output Clock dimasukkan dalam DOM, React memanggil metode componentDidMount (). Di dalamnya, komponen Clock meminta browser untuk mengatur timer untuk memanggil metode tick () komponen sekali per detik.
Setiap detik browser memanggil metode tick (). Di dalamnya, komponen Clock menjadwalkan pembaruan UI dengan memanggil setState () dengan objek yang berisi waktu saat ini. Berkat panggilan setState (), React tahu keadaan telah berubah, dan memanggil metode render () lagi untuk mempelajari apa yang seharusnya ada di layar. Kali ini, this.state.date dalam metode render () akan berbeda, sehingga output render akan menyertakan waktu yang diperbarui.
Jika komponen Clock dihapus dari DOM, React memanggil metode cycle komponen componentWillUnmount () sehingga timer dihentikan.