We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev
React
v18.2.0 LanguagesGitHub

React.Component

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

Laman ini menjelaskan referensi API mendetail untuk definisi kelas komponen React. Diasumsikan bahwa Anda telah familier dengan konsep dasar React seperti Komponen dan Props serta State dan Lifecycle. Jika belum, baca konsep dasar tersebut terlebih dulu.

Ikhtisar

React memungkinkan Anda untuk mendefinisikan komponen sebagai kelas atau fungsi. Untuk saat ini, komponen yang didefinisikan sebagai kelas menyediakan lebih banyak fitur, yang akan dijelaskan secara mendetail di laman ini. Untuk mendefinisikan sebuah kelas komponen React, Anda harus meng-extend React.Component:

class Welcome extends React.Component {
  render() {
    return <h1>Halo, {this.props.name}</h1>;
  }
}

Satu-satunya metode yang harus didefinisikan dalam sebuah subkelas React.Component adalah render(). Semua metode lainnya yang dijelaskan dalam laman ini bersifat opsional.

Kami sangat menyarankan untuk tidak membuat kelas dasar komponen Anda sendiri. Dalam komponen React, penggunaan ulang kode diperoleh secara utama lewat metode komposisi, alih-alih menggunakan inheritance.

Catatan:

React tidak memaksa Anda untuk menggunakan sintaksis kelas ES6. Jika Anda lebih suka menghindarinya, Anda bisa menggunakan modul create-react-class atau abstraksi khusus yang mirip. Anda bisa mempelajarinya lebih lanjut dalam Menggunakan React tanpa ES6.

Lifecycle Komponen {#the-component-lifecycle}

Masing-masing komponen memiliki beberapa “metode lifecycle” yang bisa ditimpa untuk menjalankan kode pada waktu tertentu dalam proses. Anda bisa menggunakan diagram lifecycle ini sebagai contekan. Pada daftar berikut, metode lifecycle yang umum digunakan dibedakan dengan huruf tebal. Metode lainnya ada untuk kasus yang sangat jarang digunakan.

Pemasangan (Mounting)

Metode berikut dipanggil secara berurutan ketika sebuah instance komponen sedang dibuat dan disisipkan ke dalam DOM:

Catatan:

Metode berikut merupakan metode usang dan Anda harus menghindarinya dalam kode yang baru:

Pembaruan

Pembaruan bisa disebabkan oleh perubahan pada props atau state. Metode berikut dipanggil secara berurutan saat komponen di-render ulang:

Catatan:

Metode berikut merupakan metode usang dan Anda harus menghindarinya dalam kode yang baru:

Pelepasan (Unmounting)

Metode berikut dipanggil saat komponen sedang dihapus dari DOM:

Penanganan Kesalahan

Metode berikut dipanggil saat terjadi kesalahan dalam proses render, dalam metode lifecycle, atau dalam konstruktor semua komponen anak.

API Lainnya

Masing-masing komponen juga menyediakan beberapa API lainnya:

Properti Kelas

Properti Instance

Referensi

Metode Lifecycle yang Sering Digunakan

Metode dalam bagian berikut mencakup sebagian besar kasus penggunaan yang Anda hadapi ketika membuat komponen React. Untuk rujukan visual, lihat diagram lifecycle ini.

render() 

render()

Metode render() merupakan satu-satunya metode yang dibutuhkan dalam komponen kelas.

Saat dipanggil, metode ini akan memeriksa this.props dan this.state serta mengembalikan tipe berikut:

  • Element React. Umumnya dibuat lewat JSX. Misalnya, <div /> dan <MyComponent /> merupakan elemen React yang memerintahkan React untuk me-render sebuah simpul DOM, atau komponen yang didefinisikan pengguna.
  • Array dan fragment. Memungkinkan Anda untuk mengembalikan beberapa elemen sekaligus dari render. Lihat dokumentasi tentang fragment untuk detail lebih lanjut.
  • Portal. Memungkinkan Anda untuk me-render anak ke subpohon DOM yang berbeda. Lihat dokumentasi tentang portals for more details.
  • String dan angka. Tipe ini akan di-render sebagai simpul teks dalam DOM.
  • Boolean atau null or undefined. Tidak me-render (umumnya ada untuk mendukung pola return test && <Child />, dengan nilai test yang bertipe boolean).

Fungsi render() harus bersifat murni (pure), yang berarti fungsi ini tidak mengubah state komponen, mengembalikan hasil yang sama setiap kali dipanggil, dan tidak berinteraksi langsung dengan browser.

Jika Anda harus berinteraksi dengan browser, jalankan prosesnya dalam componentDidMount() atau dalam metode lifecycle lainnya saja. Dengan menjaga render() bersifat murni, cara kerja komponen lebih mudah dibayangkan.

Catatan

render() tidak akan dipanggil jika shouldComponentUpdate() mengembalikan nilai false.

constructor() 

constructor(props)

Jika Anda tidak menginisialisasi state dan Anda tidak mem-bind metode, Anda tidak perlu mengimplementasikan konstruktor dalam komponen React Anda.

Konstruktor dalam komponen React dipanggil sebelum dipasang (mounted). Saat mengimplementasikan konstruktor untuk subkelas React.Component, Anda harus memanggil super(props) sebelum statement lainnya. Jika tidak, this.props akan bernilai undefined dalam konstruktor, yang bisa menyebabkan bug.

Umumnya, konstruktor dalam React hanya digunakan untuk dua tujuan:

  • Menginsialisasi state lokal dengan menetapkan sebuah obyek ke this.state.
  • Mem-bind metode event handler ke sebuah instance.

Anda tidak boleh memanggil setState() dalam constructor(). Jika komponen Anda membutuhkan state lokal,, tetapkan state awal ke this.state secara langsung dalam konstruktor:

constructor(props) {
  super(props);
  // Tidak diperbolehkan memanggil this.setState() di sini!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Konstruktor merupakan satu-satunya tempat untuk menetapkan nilai this.state secara langsung. Dalam metode lainnya, Anda harus menggunakan this.setState().

Hindari memperkenalkan efek samping atau langganan (subscription) dalam konstruktor. Untuk kasus semacam ini, gunakan componentDidMount().

Catatan

Hindari menyalin prop ke state! Ini adalah kesalahan yang umum terjadi:

constructor(props) {
 super(props);
 // Jangan lakukan seperti di bawah ini!
 this.state = { color: props.color };
}

Masalahnya adalah keduanya tidak diperlukan sama sekali (Anda bisa menggunakan this.props.color secara langsung), dan menyebabkan bug (pembaruan ke prop color tidak akan dicerminkan dalam state).

Hanya gunakan pola semacam ini jika Anda secara sengaja ingin mengabaikan pembaruan atas prop. Dalam kasus semacam ini, lebih mudah dipahami jika prop diberi nama initialColor atau defaultColor. Kemudian Anda bisa memaksa komponen untuk me-”reset” state internalnya dengan mengubah key-nya jika diperlukan.

Baca postingan blog kami tentang menghindari state turunan untuk mempelajari lebih lanjut tentang apa yang harus dilakukan jika Anda memerlukan beberapa state yang tergantung pada prop.

componentDidMount() 

componentDidMount()

componentDidMount() dipanggil langsung setelah sebuah komponen dipasang (disisipkan ke dalam pohon), Inisialisasi yang membutuhkan simpul DOM harus diletakkan di sini. Jika Anda perlu memuat data dari endpoint remote, metode ini merupakan tempat yang baik untuk menginisialisasi permintaan jaringan.

Metode ini merupakan tempat yang baik untuk mempersiapkan langganan (subscription). Jika Anda melakukan hal ini, jangan lupa untuk berhenti berlangganan dalam componentWillUnmount().

Anda bisa langsung memanggil setState() dalam componentDidMount(). Ini akan memicu proses render ekstra, tetapi akan terjadi sebelum browser memperbarui layar. Ini menjamin bahwa walau render() akan dipanggil dua kali dalam kasus tersebut, pengguna tidak akan melihat state intermediate. Gunakan pola ini dengan hati-hati karena sering mengakibatkan masalah kinerja. Dalam berbagai kasus umum, Anda bisa menetapkan state awal dalam constructor(). Penggunaan semacam ini mungkin diperlukan untuk kasus seperti kasus modal dan tooltip, misalnya Anda harus mengukur simpul DOM sebelum me-render sesuatu yang tergantung pada ukuran atau posisinya.

componentDidUpdate() 

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() langsung dipanggil setelah terjadi perubahan. Metode ini tidak dipanggil dalam proses render awal.

Gunakan metode ini sebagai kesempatan untuk beroperasi pada DOM ketika komponen diperbarui. Metode ini juga merupakan tempat yang baik untuk menjalankan pemanggilan jaringan, selama Anda bisa membandingkan prop saat ini dengan prop sebelumnya (misalnya, permintaan jaringan mungkin tidak diperlukan jika prop tidak berubah).

componentDidUpdate(prevProps) {
  // Penggunaan umum (Jangan lupa untuk membandingkan _props_):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Anda bisa langsung memanggil setState() dalam componentDidUpdate() tetapi perhatikan bahwa pemanggilannya harus dibungkus dalam sebuah kondisi seperti contoh di atas, atau Anda akan mengakibatkan perulangan yang tak terbatas. Ini juga akan mengakibatkan proses render ekstra yang walau tidak tampak ke pengguna, bisa berdampak pada kinerja komponen. Jika Anda mencoba “mencerminkan” beberapa state ke sebuah prop yang datang dari tingkat yang lebih tinggi, pertimbangkan untuk menggunakan secara langsung prop-nya. Baca lebih lanjut tentang mengapa menyalin props ke state bisa menyebabkan bug.

Jika komponen Anda mengimplementasikan lifecycle getSnapshotBeforeUpdate() (yang sangat jarang), nilai yang dikembalikan akan diteruskan sebagai parameter ”snapshot” ketiga ke componentDidUpdate(). Jika tidak, parameter ini akan bernilai undefined.

Catatan

componentDidUpdate() tidak akan dipanggil jika shouldComponentUpdate() mengembalikan nilai false.

componentWillUnmount() 

componentWillUnmount()

componentWillUnmount() dipanggil langsung sebelum komponen dilepas dan dihancurkan. Lakukan pembersihan yang diperlukan, misalnya menghancurkan timer, membatalkan permintaan jaringan, atau membersihkan semua langganan yang dibuat dalam componentDidMount().

Anda tidak boleh memanggil setState() dalam componentWillUnmount() karena komponen tidak akan pernah di-render ulang. Segera setelah komponen dilepas, komponen tersebut tidak akan dipasang kembali.

Metode Lifecycle yang Jarang Digunakan {#rarely-used-lifecycle-methods}

Metode dalam bagian berikut terkait dengan kasus penggunaan yang tidak umum. Metode berikut terkadang berguna, tetapi sebagian besar komponen Anda mungkin tidak membutuhkannya. Anda bisa melihat metode berikut dalam diagram lifecycle ini jika Anda mengeklik kotak centang “Tampilkan lifecycle yang kurang umum” di bagian atas.

shouldComponentUpdate() 

shouldComponentUpdate(nextProps, nextState)

Gunakan shouldComponentUpdate() untuk memberi tahu React jika output komponen tidak dipengaruhi oleh perubahan yang terjadi dalam state atau prop. Perilaku default adalah menjalankan proses render untuk setiap perubahan state atau props. Dalam hampir semua kasus, Anda seharusnya mengandalkan perilaku default ini.

shouldComponentUpdate() dipanggil sebelum proses render ketika nilai baru prop atau state diterima. Nilai kembalian default metode ini adalah true. Metode ini tidak dipanggil dalam proses render awal atau ketika forceUpdate() digunakan.

Metode ini hanya ada karena alasan optimalisasi kinerja. Jangan mengandalkan metode ini untuk “mencegah” proses render karena akan menyebabkan bug. Pertimbangkan untuk menggunakan PureComponent yang sudah ada, alih-alih menulis shouldComponentUpdate() secara manual. PureComponent akan menjalankan perbandingan dangkal (shallow comparison) atas props dan state, dan mengurangi kemungkinan untuk melewatkan pembaruan yang diperlukan.

Jika Anda yakin untuk menuliskannya secara manual, Anda bisa membandingkan this.props dengan nextProps serta this.state dengan nextState dan kemudian mengembalikan false untuk memberi tahu React bahwa pembaruan bisa dilewati. Harap diingat bahwa mengembalikan false tidak mencegah komponen anak untuk di-render ketika state komponen anak berubah.

Kami tidak menyarankan untuk memeriksa pembandingan secara mendalam (deep equality check) atau menggunakan JSON.stringify() dalam shouldComponentUpdate(). Cara ini sangat tidak efisien dan berdampak buruk pada kinerja.

Saat ini, jika shouldComponentUpdate() mengembalikan false, maka UNSAFE_componentWillUpdate(), render(), dan componentDidUpdate() tidak akan dipanggil. Di masa datang, React mungkin akan memperlakukan shouldComponentUpdate() hanya sebagai panduan, alih-alih sebagai prasyarat yang ketat, dan mengembalikan nilai false masih memungkinkan untuk me-render komponen yang bersangkutan.

static getDerivedStateFromProps() 

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps dipanggil langsung sebelum memanggil metode render, baik saat pemasangan awal (initial mount) maupun dalam pembaruan selanjutnya. Metode ini mengembalikan sebuah obyek untuk memperbarui state, atau null untuk tidak memperbarui.

Metode ini ada untuk kasus yang sangat jarang, yaitu saat state tergantung pada perubahan dalam props dalam sebuah kurun waktu. Misalnya, mungkin sangat berguna untuk mengimplementasikan sebuah komponen <Transition>, yang membandingkan anak sebelum dan selanjutnya untuk menentukan yang mana yang akan dianimasikan atau tidak.

Menurunkan state bisa menyebabkan kode lebih bertele-tele dan membuat komponen Anda susah dibayangkan. Pastikan Anda mengenal alternatif yang lebih sederhana:

Metode ini tidak memiliki akses ke instance komponen. Jika diinginkan, Anda bisa menggunakan ulang kode di antara beberapa getDerivedStateFromProps() dengan metode lain dalam kelas, dengan mengekstrak fungsi murni props dan state komponen di luar definisi kelas.

Perhatikan bahwa metode ini dipanggil dalam setiap render, tanpa memperhatikan sebabnya. Ini berbeda dengan UNSAFE_componentWillReceiveProps, yang akan dipanggil saat induk menyebabkan proses render ulang dan bukan disebabkan oleh setState lokal.

getSnapshotBeforeUpdate() 

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() dipanggil langung setelah output hasil render terbaru di-commit, misalnya ke DOM. Metode ini memungkinkan komponen Anda untuk menangkap informasi dari DOM (misalnya posisi scroll) sebelum nilainya mungkin berubah. Semua nilai yang dikembalikan lifecycle ini akan diteruskan sebagai parameter ke componentDidUpdate().

Kasus penggunaan ini tidak umum, tetapi mungkin terjadi dalam antarmuka seperti utas chatting yang harus menangani posisi scroll secara khusus.

Nilai snapshot (atau null) harus dikembalikan.

Misalnya:

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

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

Pada contoh di atas, sangat penting untuk membaca properti scrollHeight dalam getSnapshotBeforeUpdate karena mungkin ada penundaan antara lifecycle tahap ”render” (misalnya metode render) dan lifecycle tahap ”commit” (misalnya getSnapshotBeforeUpdate dan componentDidUpdate).

Error Boundary

Error boundary (pembatas kesalahan) merupakan komponen React yang menangkap kesalahan JavaScript di semua tempat di dalam pohon komponen, mencatat kesalahan tersebut, dan menampilkan antarmuka darurat (fallback) alih-alih menampilkan pohon komponen yang rusak. Error boundary menangkap kesalahan dalam proses render, dalam metode lifecycle, dan dalam konstruktor dari keseluruhan pohon di bawahnya.

Sebuah komponen kelas menjadi komponen error boundary jika komponen tersebut mendefinisikan salah satu (atau kedua) metode lifecycle static getDerivedStateFromError() atau componentDidCatch(). Pembaruan state dari lifecycle tersebut dapat digunakan untuk menangkap kesalahan JavaScript yang tidak tertangani dalam pohon dan menampilkan antarmuka darurat.

Hanya gunakan komponen error boundary untuk proses pemulihan dari eksepsi yang tidak diharapkan; jangan menggunakannya dalam alur program.

Untuk detail lebih lanjut, lihat Penanganan Kesalahan dalam React 16.

Catatan

Error boundary hanya akan menangkap kesalahan dalam komponen di bawah pohon. Sebuah komponen error boundary tidak dapat menangkap kesalahan dari dalam dirinya sendiri.

static getDerivedStateFromError() 

static getDerivedStateFromError(error)

Lifecycle ini dipanggil setelah sebuah kesalahan dilontarkan oleh komponen turunan. Lifecycle ini menerima kesalahan yang dilontarkan sebagai sebuah parameter dan harus mengembalikan nilai untuk memperbarui state.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // Perbarui state agar proses render berikutnya akan menampilkan antarmuka darurat.    return { hasError: true };  }
  render() {
    if (this.state.hasError) {      // Anda bisa menampilkan antarmuka darurat Anda di sini      return <h1>Terjadi masalah.</h1>;    }
    return this.props.children;
  }
}

Catatan

getDerivedStateFromError() dipanggil dalam tahap ”render”, jadi efek samping tidak diizinkan. Untuk kasus penggunaan efek samping, gunakan componentDidCatch().

componentDidCatch() 

componentDidCatch(error, info)

Lifecycle ini dipanggil setelah terjadi sebuah kesalahan yang dilontarkan oleh komponen turunan. Lifecycle menerima dua parameter:

  1. error - Kesalahan yang dilontarkan.
  2. info - Sebuah objek yang berisi key componentStack yang mengandung informasi tentang komponen yang melontarkan kesalahan.

componentDidCatch() dipanggil dalam tahap ”commit” sehingga efek samping masih diizinkan. Lifecycle ini seharusnya digunakan untuk pencatatan kesalahan:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Perbarui state agar proses render berikutnya akan menampilkan antarmuka darurat.
    return { hasError: true };
  }

  componentDidCatch(error, info) {    // Contoh "componentStack":    //   in ComponentThatThrows (created by App)    //   in ErrorBoundary (created by App)    //   in div (created by App)    //   in App    logComponentStackToMyService(info.componentStack);  }
  render() {
    if (this.state.hasError) {
      // Anda bisa menampilkan antarmuka darurat Anda di sini
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Production and development builds of React slightly differ in the way componentDidCatch() handles errors.

On development, the errors will bubble up to window, this means that any window.onerror or window.addEventListener('error', callback) will intercept the errors that have been caught by componentDidCatch().

On production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by componentDidCatch().

Catatan

Pada peristiwa kesalahan berikutnya, Anda bisa me-render antarmuka darurat lewat componentDidCatch() dengan memanggil setState, tetapi hal ini akan menjadi usang dalam rilis masa mendatang. Gunakan static getDerivedStateFromError() untuk menangani proses render kesalahan.

Metode Lifecycle Legacy {#legacy-lifecycle-methods}

Metode lifecycle di bawah ini ditandai sebagai ”legacy”. Metode tersebut masih berfungsi, tetapi kami tidak menyarankan untuk menggunakannya dalam kode baru. Anda bisa mempelajari lebih lanjut tentang migrasi dari metode lifecycle legacy dalam postingan blog ini.

UNSAFE_componentWillMount() 

UNSAFE_componentWillMount()

Catatan

Metode lifecycle ini sebelumnya diberi nama componentWillMount. Nama tersebut masih akan berfungsi hingga versi 17. Gunakan perintah codemod rename-unsafe-lifecycle untuk memperbarui komponen Anda secara otomatis.

UNSAFE_componentWillMount() dipanggil sebelum proses pemasangan terjadi. Metode ini dipanggil sebelum render(), sehingga pemanggilan setState() secara sinkronus dalam metode ini tidak akan memicu proses render ekstra. Secara umum, kami menyarankan menggunakan constructor() untuk menginisialisasi state.

Hindari memperkenalkan efek samping atau langganan dalam metode ini. Untuk kasus penggunaan ini, gunakan componentDidMount().

Metode ini adalah satu-satunya metode lifecycle yang dipanggil dalam proses render sisi server.

UNSAFE_componentWillReceiveProps() 

UNSAFE_componentWillReceiveProps(nextProps)

Catatan

Metode lifecycle ini sebelumnya diberi nama componentWillReceiveProps. Nama tersebut masih akan berfungsi hingga versi 17. Gunakan perintah codemod rename-unsafe-lifecycle untuk memperbarui komponen Anda secara otomatis.

Catatan:

Penggunaan lifecycle ini seringkali menyebabkan bug dan ketidakkonsistenan

  • Jika Anda perlu menjalankan efek samping (misalnya, pengambilan data atau animasi) sebagai reaksi atas perubahan props, gunakan lifecycle componentDidUpdate.
  • Jika Anda menggunakan componentWillReceiveProps untuk menghitung ulang beberapa data hanya ketika terjadi perubahan props, gunakan helper memoization.
  • Jika Anda menggunakan componentWillReceiveProps untuk “me-reset” beberapa state ketika terjadi perubahan props, pertimbangkan untuk membuat komponen dikontrol secara lengkap atau dikontrol lengkap bersama dengan key.

Untuk kasus penggunaan lainnya, ikuti rekomendasi dalam postingan blog ini tentang state turunan.

UNSAFE_componentWillReceiveProps() dipanggil sebelum komponen yang dipasang menerima props baru. Jika Anda perlu untuk memperbarui state sebagai reaksi atas perubahan prop (misalnya untuk me-reset-nya), Anda bisa membandingkan this.props dam nextProps serta melakukan transisi state menggunakan this.setState() dalam metode ini.

Perhatikan bahwa jika komponen induk menyebabkan komponen Anda di-render ulang, metode ini akan tetap dipanggil walau props Anda tidak berubah. Pastikan untuk membandngkan nilai saat ini dan nilai setelahnya jika Anda hanya ingin menangani perubahan.

React tidak memanggil UNSAFE_componentWillReceiveProps() dengan props awal dalam proses pemasangan. React hanya memanggil metode ini jika beberapa props komponen mungkin akan diperbarui. Pemanggilan this.setState() secara umum tidak akan memicu UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate() 

UNSAFE_componentWillUpdate(nextProps, nextState)

Catatan

Metode lifecycle ini sebelumnya diberi nama componentWillUpdate. Nama tersebut masih akan berfungsi hingga versi 17. Gunakan perintah codemod rename-unsafe-lifecycle untuk memperbarui komponen Anda secara otomatis.

UNSAFE_componentWillUpdate() dipanggil sebelum proses render ketika props atau state baru sedang diterima. Gunakan metode ini sebagai kesempatan untuk menjalankan persiapan sebelum proses pembaruan terjadi. Metode ini tidak dipanggil untuk render awal.

Perhatikan bahwa Anda tidak bisa memanggil this.setState() di sini, dan juga Anda tidak boleh melakukan hal lain (misalnya, dispatch atau aksi Redux) yang bisa memicu sebuah pembaruan atas komponen React sebelum pengembalian oleh UNSAFE_componentWillUpdate().

Umumnya, metode ini bisa digantikan oleh componentDidUpdate(). Jika Anda membaca dari sisi DOM dalam metode ini (misalnya, untuk menyimpan posisi scroll), Anda bisa memindahkan logikanya ke metode getSnapshotBeforeUpdate().

Catatan

UNSAFE_componentWillUpdate() tidak akan dipanggil jika shouldComponentUpdate() mengembalikan nilai false.

API Lainnya

Tidak seperti metode lifecycle di atas (yang akan dipanggil oleh React untuk Anda), metode berikut merupakan metode yang bisa Anda panggil dari dalam komponen Anda.

Hanya ada dua metode, yaitu: setState() dan forceUpdate().

setState() 

setState(updater[, callback])

setState() mengantrekan perubahan atas state komponen dan memberi tahu React bahwa komponen ini beserta anaknya harus di-render ulang dengan state terbaru. Metode ini merupakan metode utama yang Anda gunakan untuk memperbarui antarmuka sebagai reaksi atas event handler dan balasan server.

Anda bisa memandang setState() sebagai sebuah request alih-alih memandangnya sebagai perintah perantara untuk memperbarui komponen. Untuk kinerja yang secara persepsi lebih baik, React mungkin menundanya, dan kemudian memperbarui beberapa komponen dalam sekali jalan. React tidak menjamin bahwa perubahan state akan selalu diterapkan secara langsung.

setState() tidak selalu langsung memperbarui komponen. Metode ini mungkin mengelompokkan pemanggilan atau menunda pembaruan untuk dilakukan nanti. Hal ini menyebabkan pembacaan this.state langsung setelah memanggil setState() menjadi sebuah jebakan tersembunyi. Alih-alih menggunakan cara tersebut, gunakan componentDidUpdate atau callback setState (setState(updater, callback)), yang dijamin akan dipanggil setelah pembaruan diterapkan. Jika Anda perlu untuk menetapkan state berdasarkan state sebelumnya, baca tentang argumen updater di bawah ini.

setState() akan selalu menyebabkan proses render ulang, kecuali jika shouldComponentUpdate() mengembalikan nilai false. Jika obyek mutable digunakan dan logika render kondisional tidak bisa diimplementasikan dalam shouldComponentUpdate(), pemanggilan setState() ketika state baru berbeda dengan state sebelumnya akan menghindari proses render ulang yang tidak perlu.

Argumen pertama merupakan fungsi updater dengan tanda tangan sebagai berikut:

(state, props) => stateChange

state merupakan referensi ke state komponen pada saat perubahan sedang diterapkan. Referensi ini seharusnya tidak boleh langsung bermutasi, tetapi perubahan seharusnya direpresentasikan dengan membangun obyek baru berdasarkan input dari state dan props. Misalnya, asumsikan kita ingin menaikkan sebuah nilai dalam state dengan props.step:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

Baik state maupun props yang diterima fungsi updater akan dijamin selalu yang terbaru. Output dari updater akan digabungkan secara dangkal dengan state.

Parameter kedua dalam setState() merupakan logika callback opsional yang akan dijalankan segera setelah setState diselesaikan dan komponen di-render ulang. Umumnya, kami menyarankan untuk menggunakan componentDidUpdate() untuk logika semacam ini.

Alih-alih sebuah fungsi, Anda bisa meneruskan sebuah obyek secara opsional sebagai argumen ke setState():

setState(stateChange[, callback])

Ini akan melakukan penggabungan dangkal dari stateChange menjadi state yang baru, misalnya untuk memperbarui jumlah item dalam keranjang belanja:

this.setState({quantity: 2})

Bentuk setState() juga bersifat sinkronus, dan pemanggilan berulang kali dalam siklus yang sama mungkin akan dikelompokkan sekaligus. Misalnya, jika Anda berusaha untuk menaikkan jumlah item lebih dari sekali dalam siklus yang sama, hasilnya akan sama dengan pemanggilan sebagai berikut:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

Pemanggilan berikutnya akan menimpa nilai dari pemanggilan sebelumnya dalam siklus yang sama, sehingga jumlah di atas hanya akan dinaikkan sekali saja. Jika state selanjutnya bergantung pada state saat ini, kami sarankan untuk menggunakan bentuk fungsi updater saja:

this.setState((_state_) => {
  return {quantity: state.quantity + 1};
});

Untuk detail lebih lanjut, baca:

forceUpdate() 

component.forceUpdate(callback)

Secara default, ketika state atau props komponen Anda berubah, komponen Anda akan di-render ulang. Jika metode render() Anda tergantung pada beberapa data lain, Anda bisa memberi tahu React bahwa komponen Anda harus di-render ulang dengan memanggil forceUpdate().

Pemanggilan forceUpdate() akan menyebabkan pemanggilan render() dalam komponen, dan melewatkan shouldComponentUpdate(). Hal ini akan memicu metode lifecycle normal untuk komponen anak, termasuk metode shouldComponentUpdate() masing-masing anak. React masih akan memperbarui DOM jika markup-nya berubah.

Umumnya, Anda harus sejauh mungkin menghindari semua penggunaan forceUpdate() dan hanya membaca dari this.props dan this.state dalam render().

Properti Kelas

defaultProps

defaultProps dapat didefinisikan sebagai properti dalam kelas komponen itu sendiri, yang digunakan untuk menetapkan props default pada kelas tersebut. Ini digunakan untuk props yang bernilai undefined tetapi tidak untuk props yang bernilai null. Misalnya:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

Jika props.color tidak disediakan, nilainya akan ditetapkan secara default sebagai 'blue':

  render() {
    return <CustomButton /> ; // Nilai props.color akan ditetapkan menjadi blue
  }

Jika props.color ditetapkan bernilai null, nilainya akan tetap null:

  render() {
    return <CustomButton color={null} /> ; // Nilai props.color akan tetap _null_
  }

displayName

String displayName digunakan untuk proses debug. Umumnya, Anda tidak perlu menetapkannya secara eksplisit karena nilainya diturunkan dari nama fungsi atau kelas yang mendefinisikan komponen. Anda mungkin ingin menetapkan nilainnya secara eksplisit jika Anda ingin menampilkannya dengan nama yang berbeda untuk keperluan debug atau jika Anda membuat higher-order component, baca Pembungkusan displayName untuk Mempermudah Debug untuk detail lebih lanjut.

Properti Instance

props

this.props mengandung props yang didefinisikan oleh pemanggil komponen ini. Lihat Komponen dan Props untuk panduan pengantar props.

Secara khusus, this.props.children merupakan prop yang bersifat khusus, yang umumnya didefinisikan oleh tag anak dalam ekspresi JSX, alih-alih dalam tagnya sendiri.

state {#state}

state mengandung data khusus untuk komponen, yang bisa berubah sepanjang waktu. Nilai state didefinisikan oleh pengguna dan harus berupa obyek JavaScript biasa.

Jika beberapa nilai tidak digunakan untuk proses render atau aliran data (misalnya ID timer), Anda tidak perlu meletakkannya dalam state. Nilai semacam ini bisa didefinisikan sebagai field dalam instance komponen.

Lihat State dan Lifecycle untuk informasi lebih lanjut tentang state.

Jangan pernah mengubah this.state secara langsung, karena pemanggilan setState() berikutnya bisa menimpa perubahan yang Anda buat. Perlakukan this.state seperti halnya bersifat immutable.

Is this page useful?Edit halaman ini