Lifecycle (Siklus Hidup), apa itu Lifecycle pada React Native?, Lifecycle pada React Native adalah aktifitas method yang dilakukan oleh React Native ketika aplikasi di jalankan. Terus kenapa saya harus tahu Lifecycle ?. Jawabannya sangat penting karena Lifecycle mengatur semua aktifitas yang terjadi pada aplikasi yang kita buat.



Aktifitas apa saja contohnya?.
Contohnya ketika user membuka aplikasi itu menggunakan sebuah lifecycle. Nah pada tutorial ini akan dijelaskan mengenai Lifecycle pada Class Component di React Native.

Apa Yang Akan Kita Pelajari?

  • Penjelasan Dan Jenis Lifecycle Component Class React Native
  • Praktek Koding

Penjelasan Dan Jenis Lifecycle Component Class React Native

Jenis-Jenis Lifecycle React Native
1. Initialization adalah sebuah siklus React Native untuk menset State dan Props sebelum aplikasi di jalankan
2. Mounting adalah sebuah siklus ketika aplikasi baru saja di buka ada 2 jenis yaitu componentDidMount() ketika memuat aplikasi sebelum render dilakukan. componentWillMount yaitu siklus setelah render proses dilakukan. Tapi sekarang disarankan kamu menggunakan componentDidmount().
3. Updatating yaitu ketika kamu mengubah data yang telah di Mounting.
4. Unmount adalah proses menghancurkan atau mendestroy komponen yang sebelumnya di definisikan.


Untuk lebih jelasnya kamu  bisa melihat diagram flow di bawah ini :



Initialization

1. constructor ()
Pertama-tama, metode konstruktor dipanggil sebelum pemasangan ke DOM dan rendering.

Biasanya, Anda menginisialisasi keadaan dan mengikat metode pengendali acara dalam metode konstruktor. Ini adalah bagian pertama dari siklus hidup dan hanya dipanggil ketika secara eksplisit dinyatakan, sehingga tidak perlu mendeklarasikannya di setiap komponen yang Anda buat. Jika Anda perlu membuat efek samping atau langganan dalam metode ini, Anda harus menggunakan componentDidMount (). Saya akan memperkenalkannya nanti karena kita akan melalui setiap metode agar mereka dipanggil.

constructor(props){
    super(props);
    this.state = {
      name: 'konsep koding',
    } // this is our initial data
  }


Mounting

1. componentDidMount ()
Tepat setelah render () selesai, komponen di-mount ke DOM dan metode lain disebut - componentDidMount (). Ketika metode ini dipanggil, kami tahu pasti bahwa kami memiliki elemen UI yang dirender. Ini adalah tempat yang baik untuk melakukan permintaan pengambilan ke server atau mengatur langganan (seperti timer). Ingat, memperbarui status akan memanggil metode render () lagi, tanpa memperhatikan status sebelumnya. Sampai metode ini disebut kita beroperasi pada DOM virtual.


import React, {Component} from 'react';
import { View, Text } from 'react-native';
class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      name: 'hello world',
    }
  }

  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ name: data.name }));
  }

  render(){
    return(
      <View>
        {/* 'updated message' will be rendered as soon as fetch return data */}
        <Text>{this.state.message}</Text>
      </View>
    )
  }
}
export default App;

2. ComponentWillMount 
Sudah depracated jadi tidak perlu saya terangkan

3. render()
Selanjutnya, setelah metode statis getDerivedStateFromProps dipanggil, metode siklus hidup berikutnya sejalan adalah metode render. Metode render harus mengembalikan komponen Asli Bereaksi (elemen JSX) ke render (atau null, untuk tidak menghasilkan apa pun). Pada langkah ini, komponen UI diberikan.

Satu hal penting yang perlu diperhatikan tentang metode render adalah bahwa fungsi render harus murni, jadi jangan mencoba menggunakan setState atau berinteraksi dengan API eksternal.

  render(){
    return(
      <View>
        {/* 'updated message' will be rendered as soon as fetch return data */}
        <Text>{this.state.message}</Text>
      </View>
    )
  }

Updating

Setiap kali sesuatu berubah di dalam komponen atau komponen induk kami, dengan kata lain, ketika status atau properti diubah, komponen tersebut mungkin perlu dirender ulang. Secara sederhana, komponen diperbarui.

Jadi apa metode siklus hidup yang dipanggil ketika komponen akan diperbarui?

1. getDerivedStateFromProps statis ()
Pertama, metode getDerivedStateFromProps statis dipanggil. Itu metode pertama yang dipanggil. Saya sudah menjelaskan metode ini dalam fase pemasangan, jadi saya akan melewatkannya.

Yang penting untuk diperhatikan adalah bahwa metode ini digunakan dalam fase pemasangan dan pembaruan.

2. shouldComponentUpdate ()
Secara default, atau dalam sebagian besar kasus, Anda ingin komponen dirender ulang saat keadaan atau properti berubah. Namun, Anda memiliki kendali atas perilaku ini.

Inilah saatnya React memutuskan apakah kita harus memperbarui komponen atau tidak.

Dalam metode siklus hidup ini, Anda dapat mengembalikan boolean dan mengontrol apakah komponen akan dirender ulang atau tidak, yaitu pada perubahan kondisi atau properti. Metode siklus hidup ini sebagian besar digunakan untuk tindakan pengoptimalan kinerja.

Contoh penggunaan shouldComponentUpdate:

Jika satu-satunya cara komponen Anda berubah adalah ketika this.props.color atau variabel this.state.count berubah, Anda dapat meminta shouldComponentUpdate memeriksa bahwa:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }
  render() {
    return (
      <View>
        <Button
          color={this.props.color}
          onPress={() => this.setState(state => ({count: state.count + 1}))}
        />
        <Text>Count: {this.state.count}</Text>
      </View>
    );
  }
}
export default Counter;
Dalam kode ini, shouldComponentUpdate hanya memeriksa apakah ada perubahan pada this.props.color atau this.state.count. Jika nilai-nilai itu tidak berubah, komponen tidak diperbarui. Jika komponen Anda lebih kompleks, Anda dapat menggunakan pola serupa melakukan “perbandingan dangkal” antara semua bidang alat peraga dan menyatakan untuk menentukan apakah komponen harus diperbarui. Pola ini cukup umum sehingga React menyediakan helper untuk menggunakan logika ini - hanya mewarisi dari React. PureComponent. Jadi kode ini adalah cara yang lebih sederhana untuk mencapai hal yang sama:

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }
  render() {
    return (
      <View>
        <Button
          title="Press me"
          color={this.props.color}
          onPress={() => this.setState(state => ({count: state.count + 1}))}
        />
        <Text>
          Count: {this.state.count}
        </Text>
      </View>
    );
  }
}
Ketika kamu menggunakan PureComponent maka aplikasi kamu lebih cepat, contoh Komponen yang menggunakan PureComponent adalah Flatlist .

 3. componentDidUpdate ()

componentDidUpdate () dipanggil segera setelah pembaruan terjadi. Metode ini tidak dipanggil untuk render awal. Ini juga merupakan tempat yang baik untuk melakukan permintaan jaringan selama Anda membandingkan alat peraga saat ini dengan alat peraga sebelumnya (mis. Permintaan jaringan mungkin tidak diperlukan jika alat peraga tidak berubah).


componentDidUpdate(preProps) {
  if(prevProps.selectedState !== this.props.selectedState){
    fetch('https://pathToApi.com')
    .then(resp => resp.json())
    .then(respJson => {
      // do what ever you want with your `response`
   
      this.setState({
        isLoading: false,
        data: respJson,
      });
    })
    .catch(err => {
      console.log(err)
    })
  }
}

Unmounting

1. componentWillUnmount()
componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

// eventData add event listener
componentDidMount() {
eventData.addEventListener()
}

// eventData remove event listener
componentWillUnmount() {
    eventData.removeEventListener()
}

Ok sekedar informasi jika kamu menggunakan Interval, Timeout,  dan Listener  kamu harus unMount atau menghancurkan proses tersebut, jika tidak maka walaupun kamu sudah berpindah logic dan screen proses tersebut akan tetap hidup dan akan membuat aplikasi berat dan yang terburuk bisa membuat crash aplikasi.


Sekian tutorial mengenai Lifecycle React Native semoga dapat bermanfaat dan membantu kamu yang sedang mempelajari React Native. Happy Coding From KonsepKoding.


Baca Juga :
#1 Pengenelan React Native Dan Cara Instalasinya Lengkap
#2 Tutorial React Native State Dan Props Serta Penjelasannya
#3 Tutorial Menampilkan Gambar React Native Yang Baik & Benar
#4 Tutorial React Native Alert, Beserta Jenis-Jenisnya Lengkap
#5 Tutorial ClickListener Pada React Native Serta Penggunaannya
#6 Tutorial React Native: Text Italic, Bold, Underline dan Styling
#7 Tutorial Membuat Custom TextArea Pada React Native
#10 Tutorial Open Link Url Website Di React Native
#11 Tutorial React Native WhatsApp Direct Send Link
#12 Tutorial React Native Modal Dengan Desain Gambar
#13 Tutorial React Native : React Navigation 5 Untuk Navigasi
#14 Tutorial React Native : Mengirim Data Pada React Navigation
#15 Tutorial React Native Top TabView Gesture Lengkap
#16 Tutorial React Native : Animation JSON Lottie