Yuk ketahui tentang react lifecycle

Yuk ketahui tentang react lifecycle - Berjumpa lagi sobs-sobs sekalian dengan seorang penyair ulung yang mencari jati diri ditengah pengasian dunia teknologi, gimana sobs-sobs kabarnya , semoga masih bisa minum kopi ditemani dengan gorengan hangat,

Oke Topik pembahasan kali ini berkisar , etttt sebentar sruput dulu kopinya.. ahhhhh

Apa dah topiknya ?

Oh iya topiknya berkisar dengan library unyu dan menggemaskan yaitu dede React.js. hehehe maklum sobs-sobs karena jaman now javascript javascript everywhere jadi kurang komplit jika materi seputar react.js ini tidak dibahas. adapun pembahasan kali ini adalah react lifecycle. apa itu react lifecycle ?

1. Kenalan react lifecycle

Oke sebelum lebih jauh kita harus memahami terlebih dahulu definisi react lifecycle, intinya react lifecycle ada siklus kerja dari react itu sendiri, kalo bisa dianalogikan seperti aktifitas kita sehari-hari dari bangun tidur, kerja, pulang kerja dan sampai tidur kembali. di react menerapkan konsep seperti itu sobs-sobs mulai dari proses awal bagaimana react component itu inisialisasi / dibuat, lalu ditampilkan ke layar, dan diupdate, hingga component itu tidak ditampilkan atau dihapus.

Sebelumnya kita sepakat sobs-sobs bahwa untuk membuat sebuah komponen di react terdapat dua cara paradigma yang bisa kita gunakan yaitu class component dan functional component dimateri ini kita akan bahas lifecycle dari keduanya.

oke kita akan bahas react lifecycle sebelum kita implementasikannya ke class component atau functional component, kita harus lebih tau dahulu lifecycle didalam react, secara garis besar lifecycle di react meliputi 3 bagian. yaitu

1. Mounting
2. Updating
3. Unmounting

2. Mounting

Monting adalah lifecycle yang dijalankan meliputi proses inisialisasi property state atau pun variabel biasa setelah itu render atau menampilkan component ke browser dan terakhir componentDidMount yaitu proses dijalankan setelah render,  untuk gambarannya seperti dibawah ini sobs.

untuk proses inisialisai dan componentDidMount hanya dijalankan sekali saja sobs-sobs pada komponent kita. agar memahami kita beranjak ke contoh dari class component dan functional component.

2.1 Contoh Mounting Class Component

Berikut ini sobs-sobs contoh sederhana dari mounting di class component

class App extends React.Component {
	// inisialisasi
	constructor() {
		super();
		this.state = {
			name: "sruputkode"
		};
		console.log("Hallo saya dari constructor");
	}

	// componentDidMount
	componentDidMount() {
		console.log("Hallo saya dari componentDidMount");
	}

	// render
	render() {
		console.log("Hallo saya dari render");
		return <h1></h1>;
	}
}

jika dieksekusi maka seperti dibawah ini sobs-sobs.

pertama-tama method constructor (inisialisasi) yang pertama dieksekusi, setelah itu method render dan dilanjutkan dengan method componentDidMount.

catatan : biasanya difase atau method componentDidMount digunakan untuk memasukan nilai baru ke dalam state dalam kasus lain seperti fetch api untuk mendapatkan resource kemudian dimasukan kedalam state yang sebelumnya sudah kita inisialisasi kita sobs. seperti contoh dibawah ini sobs :

class App extends React.Component {
	// inisialisasi
	constructor() {
		super();
		this.state = {
			name: null,
		};
		console.log("Hallo saya dari constructor");
	}

	// componentDidMount
	componentDidMount() {
		console.log("Hallo saya dari componentDidMount");
		this.setState({
			name: "Sruputkode.com pancen oye",
		})
	}

	// render
	render() {
		console.log("Hallo saya dari render");
		return <h1>{this.state.name}</h1>;
	}
}

reactRoot.render(<App />);

Kalo dieksekusi hasil seperti dibawah ini sobs

Untuk contoh diatas flow eksekusinya seperti gambar dibawah ini ya sobs.

semoga mudah dimengerti ya sobs-sobs.. hehehe next kita masuk ke contoh functional component

2.2 Contoh mounting functional component

difunctional compoment atau stateless component kita juga bisa menjalankan proses mounting, hanya saja dengan beberapa catatan yaitu kita harus menggunakan react hooks atau fungsi yang sudah disediakan oleh react sebagai pengganti fitur dari class component di functional component. dalam contoh dibawah ini kita menggunakan hook useState dan useEffect dimana useState berfungsi untuk menyimpan sebuah state di functional component, dan useEffect sebagai pengelola lifecycle. untuk tahap seperti contoh dibawah ini ya sobs.

const App = () => {
	// insialisasi
	const [name, setName] = React.useState(() => {
		console.log("inisialisasi guys");
		return "Sruputkode.com";
	});
	
	
	// componentDidMount
	React.useEffect(() => {
		console.log("componentDidMount guys");
	}, []);
	
	
	
	// render
	console.log("render guys");
	return (
		<h1>{name}</h1>
	);
}

reactRoot.render(<App />);

pertama kita inisialisasi sebuah state dan sebuah fungsi update state dengan useState untuk parameter useState bisa dengan value langsung atau dengan function langsung seperti diatas, catatan kalau dengan fungsi harus mengembalikan sebuah nilai contoh diatas kita variabel name berisi nilai state sedangkan setName adalah sebuah fungsi untuk mengupdate state. 

kemudian kita gunakan useEffect dimana fungsi mempunyai dua parameter useEffect(function, dependency) parameter pertama adalah fungsi berisikan perintah perintah kita, sedangkan parameter kedua adalah depedency jika kita ingin seperti componentDidMount maka cukup kurung kosong saja seperti diatas sobs. kode diatas jika dieksekusi hasil seperti dibawah ini.

Oke selanjutnya bagaimana jika seperti pada class component jika kita mengupdate state di compontDidMount,cara cukup tinggal kita panggil setName didalam useEffect seperti contoh dibawah ini sobs.

const App = () => {
	// insialisasi
	const [name, setName] = React.useState(() => {
		console.log("inisialisasi guys");
		return null;
	});
	
	
	// componentDidMount
	React.useEffect(() => {
		console.log("componentDidMount guys");
		setName("Sruputkode.com joshh")
	}, []);
	
	
	
	// render
	console.log("render guys");
	return (
		<h1>{name}</h1>
	);
}

reactRoot.render(<App />);

dan jika dieksekusi akan seperti dibawah ini sobs-sobs

untuk flownya dibawah ini

oke sobs-sobs lifecycle mounting selesai, lifecycle berikutnya yaitu updating

3. Updating

Updating adalah lifecycle yang dijalankan pada saat terjadi perubahan pada state, lifecycle ini dijalankan setelah proses render jika terjadi perubahan pada state dan jika tidak terjadi perubahan pada state maka lifecycle ini tidak akan dijalankan sobs-sobs.

3.1 Contoh updating class component

Berikut ini contoh dari updating class component dan digabungkan beserta mounting lifecycle.

const root = document.getElementById("root");
const reactRoot = ReactDOM.createRoot(root);

class App extends React.Component {
	// inisialisasi
	constructor() {
		super();
		this.state = {
			angka: null
		};
		console.log("Hallo saya dari constructor");
	}
	
	// componentDidMount
	componentDidMount() {
		this.setState({ angka: 1 });
		console.log("Hallo saya dari componentDidMount");
	}
	
	// componentDidUpdate 	
	componentDidUpdate() {
		console.log("Hallo saya dari componentDidUpdate");
	}

	// function untuk update state ketika di klik
	updateAngka() {
		this.setState((prevState) => {
			return {
				angka: prevState.angka + 1
			};
		});
		console.log("update state angka");
	}

	// render
	render() {
		console.log("Hallo saya dari render");
		return (
			<React.Fragment>
				<h1>{this.state.angka}</h1>
				<button onClick={this.updateAngka.bind(this)}>Tambah angka</button>
			</React.Fragment>
		);
	}
}

reactRoot.render(<App />);

Kita akan fokus pada method componentDidUpdate, method ini akan dijalankan setiap setiap perubahan pada state. dan kalo kita jalankan pertama kali maka akan seperti dibawah ini sobs.

perhatikan sobs-sobs pada bagian console silahkan dicermati, jika kita buatkan flow maka akan seperti dibawah ini

sekarang kita coba ubah statenya lagi dengan cara mengklik tombol

ketika tombol diklik maka event onClick akan mengeksekusi fungsi updateAngka didalam fungsi updateAngka ini kita lakukan updateState sobs-sobs. jika kita buat flownya maka seperti dibawah ini

Lalu pertanyaan dibenak sobs-sobs di method componentDidUpdate biasanya buat apa aja ? 

kalo pertanyaan seperti jawabannya adalah bisa buat apa aja sobs, oke buat gambaran sobs-sobs gua akan buat kasus dimana ketika angka lewat dari 10 dia akan mulai dari 0 sehingga di method componentDidUpdate akan sepeti dibawah ini.

// componentDidUpdate 	
componentDidUpdate(prevProps, prevState) {
	if (prevState.angka === 10) {
		this.setState({angka: 0})
	}
	console.log("Hallo saya dari componentDidUpdate");
}

penjelasannya componentDidUpdate diatas saya masukan dua parameter parameter pertama prevProps adalah variabel yang berisikan props sebelumnya, sedangkan prevState adalah berisikan state sebelumnya dari contoh diatas maka kita lakukan kondisi jika state angka sebelumnya 10 maka akan kita akan update state mulai dari 0 kembali.

Oke kita lanjut updating functional component.

3.2 Contoh updating functional component

untuk updating difunctional component masih sama seperti mounting yaitu kita gunakan react hooks useEffect hanya saja yang membedakan kita harus mengisi depencynya atau state. oke dari pada bingung sobs-sobs. silahkan lihat contoh dibawah ini.

const root = document.getElementById("root");
const reactRoot = ReactDOM.createRoot(root);

const App = () => {
	// inisialisasi 	
	const [angka, setAngka] = React.useState(() => {
		console.log("inisialisasi guys");
		return null;
	})
	
	// componentDidMount
	React.useEffect(() => {
		setAngka(1);
		console.log("componentDidMount");
	}, []);
	
	// componentDidUpdate
	React.useEffect(() => {
		console.log("componentDidUpdate guys");
	}, [angka]);
	
	
	// function untuk update state ketika di klik
	const updateAngka = () => {
		setAngka(prevAngka => prevAngka + 1);
		console.log("update state angka guys");
	}
	
	// render
	console.log("render");
	return (
		<React.Fragment>
			<h1>{angka}</h1>
			<button onClick={updateAngka}>Tambah angka</button>
		</React.Fragment>
	);
}

reactRoot.render(<App />);

ketika pertama kali dijalankan maka hasilnya seperti dibawah ini.

gimana sobs-sobs, kok ada yang aneh ya bang, kok pas pertama kali dijalankan didUpdate dieksekusi juga setelah didMount ? 

ya memang seperti itu sobs-sobs ketika kita memakai useEffect walaupun kita tambahkan dependency-nya dia tetap akan dieksekusi sekali setelah mounting tentunya ini berbeda dengan yang kita pelajari updating di class component. untuk flownya ketika pertama kali dieksekusi seperti dibawah ini sobs.

kita test saat tombol di klik sobs-sobs

Jika kita buatkan flow pada saat diklik maka akan seperti dibawah ini.

jika kita membuat kasus sama seperti class component dimana ketika angka lewat dari 10 akan mulai dari 0 kembali, maka kita edit useEffect yang khusus untuk componentDidUpdate saja.

// componentDidUpdate
React.useEffect(() => {
	if (angka > 10) {
		setAngka(0);
	}
	console.log("componentDidUpdate guys");
}, [angka]);

Oke kita ke lifecycle yang terakhir yaitu unmount

4. Unmounting

ini adalah lifecycle ketika suatu component tidak lagi dirender oleh browser, untuk lebih jelasnya kita beranjak ke contohnya sobs-sobs

4.1 Contoh unmounting class component

untuk unmounting di class component telah disediakan method yaitu componentWillUnmount. untuk studi kasus penggunaanya seperti dibawah ini sobs.

const root = document.getElementById("root");
const reactRoot = ReactDOM.createRoot(root);

class Judul extends React.Component {
	constructor() {
		super();
		this.state = {
			judul: null,
		}
	}
	
	componentDidMount() {
		this.setState({ judul: "Sruputkode.com"});
	}
	
	// componentWillUnmount
	componentWillUnmount() {
		alert("judul tidak ditampilkan");
	}
	
	render() {
		return <h1>{this.state.judul}</h1>
	}
}

class App extends React.Component {
	constructor() {
		super();
		this.state = {
			tampilkanJudul: true,
		}
	}
	
	updateTampilkanJudul() {
		this.setState((prevState) => {
			return {
				tampilkanJudul: !prevState.tampilkanJudul,
			}
		})
	}
	
	render() {
		return (
			<React.Fragment>
				{/* Tampilkan judul jika status true */}
				{this.state.tampilkanJudul && <Judul/>}
				<button onClick={this.updateTampilkanJudul.bind(this)}>
					{this.state.tampilkanJudul ? "Sembunyikan judul" : "Tampilkan Judul"}
				</button>
			</React.Fragment>
		);
	}
}

reactRoot.render(<App />);

penjelasan disini gua buat dua buah component ya sobs-sobs yaitu component judul dan component app

dimana component judul ini akan berada didalam component app, didalam component app kita definisikan sebuah state yaitu tampilkanJudul, jika nilainya true maka component judul ditampilkan dan jika tidak maka tidak akan ditampilakan atau diumnount. yang perlu sobs-sobs perhatikan adalah method componentWillUnmount didalam component judul. 

hasil eksekusi kode diatas sobs

selanjutnya kita akan beranjak ke contoh functional component

4.2 Contoh unmounting functional component

untuk difunctional component unmount dihandle useEffect juga, hanya saja jika kita useEffect tersebut harus mengembalikan sebuah fungsi.

const root = document.getElementById("root");
const reactRoot = ReactDOM.createRoot(root);

const Judul = () => {
	const [judul, setJudul] = React.useState("Sruputkode.com");
	
	// unmonting
	React.useEffect(() => {
		
		// harus return sebuah fungsi
		return () => {
			alert("judul tidak ditampikan - functional component");
		}
	}, []);
	
	return (
		<h1>{judul}</h1>
	);
	
}

const App = () => {
	const [tampilkanJudul, setTampilkanJudul] = React.useState(true);
	
	const updateTampilkanJudul = () => {
		setTampilkanJudul(!tampilkanJudul);
	}
	
	return (
		<React.Fragment>
			{tampilkanJudul && <Judul/>}
			<button onClick={updateTampilkanJudul}>
				{tampilkanJudul ? "Sembunyikan judul" : "Tampikan judul"}
			</button>
		</React.Fragment>
	);
}

reactRoot.render(<App />);

dan jika dieksekusi

dari contoh diatas sobs-sobs cukup perhatikan dicomponent Judul untuk unmountingnya.

Oke sobs-sobs kita diujung pembahasan materi kali ini berhubung kopi sudah habis. hehehe 

mohon maaf ya sobs apabila ada penjelasan yang kurang dimengerti gua sarankan sobs-sobs mencari untuk mencari refrensi jika kurang mengerti dan saran dari gua sobs-sobs bisa kunjungi link sebagai refrensi belajar react lifecycle ini sobs.

See you next time.