{"id":12907,"date":"2023-09-16T05:47:39","date_gmt":"2023-09-16T05:47:39","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=12907"},"modified":"2023-10-23T05:16:35","modified_gmt":"2023-10-23T05:16:35","slug":"lifecycle-pada-react-js","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/","title":{"rendered":"Lifecycle pada React JS"},"content":{"rendered":"\n

Siklus <\/strong>Komponen<\/strong><\/h4>\n\n\n\n

Setiap komponen dalam React memiliki siklus yang dapat kamu amati dan manipulasi selama tiga fase utamanya.<\/p>\n\n\n\n

Tiga fase tersebut adalah: Mounting<\/strong>, Updating<\/strong>, and Unmounting<\/strong>.<\/p>\n\n\n\n

Mounting<\/strong><\/h4>\n\n\n\n

Mounting<\/strong> berarti menempatkan elemen ke dalam DOM.<\/p>\n\n\n\n

React memiliki empat metode bawaan yang dipanggil, dalam urutan ini, saat memasang komponen:<\/p>\n\n\n\n

  1. constructor()<\/li>
  2. getDerivedStateFromProps()<\/li>
  3. render()<\/li>
  4. componentDidMount()<\/li><\/ol>\n\n\n\n

    Metode render () diperlukan dan akan selalu dipanggil, yang lain adalah opsional dan akan dipanggil jika kamu mendefinisikannya.<\/p>\n\n\n\n

    A.     <\/strong> Metode Constructor<\/strong><\/h6>\n\n\n\n

    Metode constructor() dipanggil sebelum apa pun, ketika komponen diinisiasi, dan metode constructor() adalah tempat alami untuk mengatur keadaan awal dan nilai awal lainnya.<\/p>\n\n\n\n

    Metode constructor() dipanggil dengan props, sebagai argumen, dan kamu harus selalu mulai dengan memanggil super(props) sebelum yang lain, ini akan memulai metode konstruktor induk dan memungkinkan komponen mewarisi metode dari induknya (React.Komponen).<\/p>\n\n\n\n

    Contoh:<\/strong><\/p>\n\n\n\n

    Memanggil metode constructor, oleh React, setiap kali kamu membuat komponen:<\/p>\n\n\n

    \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  render() {\n    return (\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
    B.     Metode getDerivedStateFromProps<\/strong><\/h6>\n\n\n\n
    Metode getDerivedStateFromProps () dipanggil tepat sebelum memberi elemen di DOM.<\/p>\n\n\n\n
    Ini adalah tempat untuk mengatur objek state berdasarkan awal props.<\/p>\n\n\n\n
    Dibutuhkan state sebagai argumen, dan mengembalikan objek dengan perubahan ke state.<\/p>\n\n\n\n
    Contoh di bawah ini dimulai dengan warna favorit menjadi \u201cred\u201d, tetapi metode getDerivedStateFromProps () memperbarui warna favorit berdasarkan atribut favcol:<\/p>\n\n\n\n
    Contoh<\/strong><\/p>\n\n\n\n
    Metode getDerivedStateFromProps dipanggil tepat sebelum metode render:<\/p>\n\n\n
    \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  static getDerivedStateFromProps(props, state) {\n    return {favoritecolor: props.favcol };\n  }\n  render() {\n    return (\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n    );\n  }\n}\n \nReactDOM.render(<Header favcol="yellow"\/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
    C.     Metode Render<\/strong><\/h6>\n\n\n\n
    Metode render () diperlukan, dan merupakan metode yang sebenarnya menampilkan HTML ke DOM.<\/p>\n\n\n\n
    Contoh<\/strong><\/p>\n\n\n\n
    Komponen sederhana dengan metode render () sederhana:<\/p>\n\n\n
    \nclass Header extends React.Component {\n  render() {\n    return (\n      <h1>This is the content of the Header component<\/h1>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
    D.     Metode componentDidMount<\/strong><\/h6>\n\n\n\n
    Metode componentDidMount () dipanggil setelah komponen diberikan.<\/p>\n\n\n\n
    Di sinilah kamu menjalankan pernyataan yang mengharuskan komponen sudah ditempatkan di DOM.<\/p>\n\n\n\n
    Contoh<\/strong><\/p>\n\n\n\n
    Pada awalnya warna favorit saya merah, tapi beri saya sebentar, dan itu kuning:<\/p>\n\n\n
    \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  componentDidMount() {\n    setTimeout(() => {\n      this.setState({favoritecolor: "yellow"})\n    }, 1000)\n  }\n  render() {\n    return (\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
    Updating<\/strong><\/h4>\n\n\n\n
    Fase berikutnya dalam Lifeclyce adalah komponen Updating.<\/p>\n\n\n\n
    Sebuah komponen diperbarui setiap kali ada perubahan dalam ini komponen stateatau props.<\/p>\n\n\n\n
    React memiliki lima metode bawaan yang dipanggil, dalam urutan ini, ketika komponen diperbarui:<\/p>\n\n\n\n
    1. getDerivedStateFromProps()<\/li>
    2. shouldComponentUpdate()<\/li>
    3. render()<\/li>
    4. getSnapshotBeforeUpdate()<\/li>
    5. componentDidUpdate()<\/li><\/ol>\n\n\n\n
      Metode render () diperlukan dan akan selalu dipanggil, yang lain adalah opsional dan akan dipanggil jika kamu mendefinisikannya.<\/p>\n\n\n\n
      A.     <\/strong>Metode getDerivedStateFromProps<\/strong><\/h6>\n\n\n\n
      Juga pada update metode getDerivedStateFromProps dipanggil. Ini adalah metode pertama yang dipanggil ketika komponen diperbarui.<\/p>\n\n\n\n
      Ini masih merupakan tempat alami untuk mengatur objek negara berdasarkan alat peraga awal.<\/p>\n\n\n\n
      Contoh di bawah ini memiliki tombol yang mengubah warna favorit menjadi biru, tetapi karena metode getDerivedStateFromProps () dipanggil, yang memperbarui status dengan warna dari atribut favcol, warna favorit masih tetap berwarna kuning:<\/p>\n\n\n\n
      Contoh<\/strong><\/p>\n\n\n\n
      Jika komponen di update, metode getDerivedStateFromProps () dipanggil:<\/p>\n\n\n
      \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  static getDerivedStateFromProps(props, state) {\n    return {favoritecolor: props.favcol };\n  }\n  changeColor = () => {\n    this.setState({favoritecolor: "blue"});\n  }\n  render() {\n    return (\n      <div>\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n      <button type="button" onClick={this.changeColor}>Change color<\/button>\n      <\/div>\n    );\n  }\n}\n \nReactDOM.render(<Header favcol="yellow"\/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
      B.     Metode shouldComponentUpdate<\/strong><\/h6>\n\n\n\n
      Dalam metode shouldComponentUpdate () kamu dapat mengembalikan nilai Boolean yang menentukan apakah React harus melanjutkan dengan memberi atau tidak.<\/p>\n\n\n\n
      Nilai standarnya benar.<\/p>\n\n\n\n
      Contoh di bawah ini menunjukkan apa yang terjadi ketika metode shouldComponentUpdate () mengembalikan false:<\/p>\n\n\n\n
      Contoh<\/strong><\/p>\n\n\n\n
      Hentikan komponen rendering pada setiap update:<\/p>\n\n\n
      \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  shouldComponentUpdate() {\n    return false;\n  }\n  changeColor = () => {\n    this.setState({favoritecolor: "blue"});\n  }\n  render() {\n    return (\n      <div>\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n      <button type="button" onClick={this.changeColor}>Change color<\/button>\n      <\/div>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
      Contoh<\/strong><\/p>\n\n\n\n
      Contoh yang sama seperti di atas, tetapi kali ini metode shouldComponentUpdate () mengembalikan true sebagai gantinya:<\/p>\n\n\n
      \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  shouldComponentUpdate() {\n    return true;\n  }\n  changeColor = () => {\n    this.setState({favoritecolor: "blue"});\n  }\n  render() {\n    return (\n      <div>\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n      <button type="button" onClick={this.changeColor}>Change color<\/button>\n      <\/div>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
      C.     Metode Render<\/strong><\/h6>\n\n\n\n
      Metode render () tentu saja dipanggil ketika komponen diperbarui, ia harus merender ulang HTML ke DOM, dengan perubahan baru.<\/p>\n\n\n\n
      Contoh di bawah ini memiliki tombol yang mengubah warna favorit menjadi biru:<\/p>\n\n\n\n
      Contoh<\/strong><\/p>\n\n\n\n
      Klik tombol untuk membuat perubahan dalam status komponen:<\/p>\n\n\n
      \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  changeColor = () => {\n    this.setState({favoritecolor: "blue"});\n  }\n  render() {\n    return (\n      <div>\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n      <button type="button" onClick={this.changeColor}>Change color<\/button>\n      <\/div>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
      D.     Metode getSnapshotBeforeUpdate<\/strong><\/h6>\n\n\n\n
      Dalam metode getSnapshotBeforeUpdate () Anda memiliki akses ke alat peraga dan menyatakan sebelum pembaruan, yang berarti bahwa bahkan setelah pembaruan, kamu dapat memeriksa apa nilainya sebelum pembaruan.<\/p>\n\n\n\n
      Jika metode getSnapshotBeforeUpdate () hadir, kamu juga harus memasukkan metode componentDidUpdate () , jika tidak, Anda akan mendapatkan kesalahan.<\/p>\n\n\n\n
      Contoh di bawah ini mungkin terlihat rumit, tetapi yang dilakukannya hanyalah ini:<\/p>\n\n\n\n
      Ketika komponen sedang dipasang itu diberikan dengan warna favorit \u201cmerah\u201d.<\/p>\n\n\n\n
      Ketika komponen telah dipasang, timer mengubah status, dan setelah satu detik, warna favorit menjadi \u201ckuning\u201d.<\/p>\n\n\n\n
      Tindakan ini memicu fase pembaruan, dan karena komponen ini memiliki metode getSnapshotBeforeUpdate (), metode ini dijalankan, dan menulis pesan ke elemen DIV1 yang kosong.<\/p>\n\n\n\n
      Kemudian metode componentDidUpdate () dijalankan dan menulis pesan di elemen DIV2 kosong:<\/p>\n\n\n\n
      Contoh<\/strong><\/p>\n\n\n\n
      Gunakan metode getSnapshotBeforeUpdate () untuk mengetahui seperti apa objek keadaan sebelum pembaruan:<\/p>\n\n\n
      \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  componentDidMount() {\n    setTimeout(() => {\n      this.setState({favoritecolor: "yellow"})\n    }, 1000)\n  }\n  getSnapshotBeforeUpdate(prevProps, prevState) {\n    document.getElementById("div1").innerHTML =\n    "Before the update, the favorite was " + prevState.favoritecolor;\n  }\n  componentDidUpdate() {\n    document.getElementById("div2").innerHTML =\n    "The updated favorite is " + this.state.favoritecolor;\n  }\n  render() {\n    return (\n      &lt;div>\n        &lt;h1>My Favorite Color is {this.state.favoritecolor}&lt;\/h1>\n        &lt;div id="div1">&lt;\/div>\n        &lt;div id="div2">&lt;\/div>\n      &lt;\/div>\n    );\n  }\n}\n \nReactDOM.render(&lt;Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
      E.     Metode componentDidUpdate<\/strong><\/h6>\n\n\n\n
      Metode componentDidUpdate dipanggil setelah komponen diperbarui di DOM.<\/p>\n\n\n\n
      Contoh di bawah ini mungkin terlihat rumit, tetapi yang dilakukannya hanyalah ini:<\/p>\n\n\n\n
      Ketika komponen sedang dipasang itu diberikan dengan warna favorit \u201cmerah\u201d.<\/p>\n\n\n\n
      Ketika komponen telah dipasang, timer mengubah status, dan warnanya menjadi \u201ckuning\u201d.<\/p>\n\n\n\n
      Tindakan ini memicu fase upate, dan karena komponen ini memiliki metode componentDidUpdate, metode ini dijalankan dan menulis pesan dalam elemen DIV kosong:<\/p>\n\n\n\n
      Contoh<\/strong><\/p>\n\n\n\n
      Metode componentDidUpdate dipanggil setelah pembaruan telah diberikan dalam DOM:<\/p>\n\n\n
      \nclass Header extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {favoritecolor: "red"};\n  }\n  componentDidMount() {\n    setTimeout(() => {\n      this.setState({favoritecolor: "yellow"})\n    }, 1000)\n  }\n  componentDidUpdate() {\n    document.getElementById("mydiv").innerHTML =\n    "The updated favorite is " + this.state.favoritecolor;\n  }\n  render() {\n    return (\n      <div>\n      <h1>My Favorite Color is {this.state.favoritecolor}<\/h1>\n      <div id="mydiv"><\/div>\n      <\/div>\n    );\n  }\n}\n \nReactDOM.render(<Header \/>, document.getElementById('root'));\n<\/pre><\/div>\n\n\n
      Unmounting<\/strong><\/h4>\n\n\n\n
      Fase berikutnya dalam siklus adalah ketika komponen dihapus dari DOM, atau unmount karena React suka menyebutnya.<\/p>\n\n\n\n
      React hanya memiliki satu metode bawaan yang dipanggil ketika komponen dilepas:<\/p>\n\n\n\n
      • componentWillUnmount()<\/li><\/ul>\n\n\n\n
        A. Metode componentWillUnmount<\/strong><\/h6>\n\n\n\n
        Metode componentWillUnmount dipanggil ketika komponen akan dihapus dari DOM.<\/p>\n\n\n\n
        Contoh<\/strong><\/p>\n\n\n\n
        Klik tombol untuk menghapus tajuk:<\/p>\n\n\n
        \nclass Container extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {show: true};\n  }\n  delHeader = () => {\n    this.setState({show: false});\n  }\n  render() {\n    let myheader;\n    if (this.state.show) {\n      myheader = &lt;Child \/>;\n    };\n    return (\n      &lt;div>\n      {myheader}\n      &lt;button type="button" onClick={this.delHeader}>Delete Header&lt;\/button>\n      &lt;\/div>\n    );\n  }\n}\n \nclass Child extends React.Component {\n  componentWillUnmount() {\n    alert("The component named Header is about to be unmounted.");\n  }\n  render() {\n    return (\n      &lt;h1>Hello World!&lt;\/h1>\n    );\n  }\n}\n \nReactDOM.render(&lt;Container \/>, document.getElementById('root'));\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
        Siklus Komponen Setiap komponen dalam React memiliki siklus yang dapat kamu amati dan manipulasi selama tiga fase utamanya. Tiga fase tersebut adalah: Mounting, Updating, and Unmounting. Mounting Mounting berarti menempatkan<\/p>\n","protected":false},"author":15,"featured_media":10127,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2722],"tags":[4625,4626,4628,4627,4630,4629],"class_list":["post-12907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-react-js","tag-belajar-react-js-siklus","tag-belajar-react-js-siklus-pemula","tag-kursus-react-js-siklus-bandung","tag-kursus-react-js-siklus-jakarta","tag-tutorial-react-js-siklus","tag-tutorial-react-js-siklus-pemula"],"yoast_head":"\nLifecycle pada React JS - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lifecycle pada React JS - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Siklus Komponen Setiap komponen dalam React memiliki siklus yang dapat kamu amati dan manipulasi selama tiga fase utamanya. Tiga fase tersebut adalah: Mounting, Updating, and Unmounting. Mounting Mounting berarti menempatkan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-16T05:47:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-23T05:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\"},\"headline\":\"Lifecycle pada React JS\",\"datePublished\":\"2023-09-16T05:47:39+00:00\",\"dateModified\":\"2023-10-23T05:16:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/\"},\"wordCount\":784,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"keywords\":[\"Belajar React JS Siklus\",\"Belajar React JS Siklus Pemula\",\"Kursus React JS Siklus Bandung\",\"Kursus React JS Siklus Jakarta\",\"Tutorial React JS Siklus\",\"Tutorial React JS Siklus Pemula\"],\"articleSection\":[\"Belajar React JS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/\",\"name\":\"Lifecycle pada React JS - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"datePublished\":\"2023-09-16T05:47:39+00:00\",\"dateModified\":\"2023-10-23T05:16:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"width\":750,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/lifecycle-pada-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lifecycle pada React JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/farry\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lifecycle pada React JS - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Lifecycle pada React JS - WebHozz Blog","og_description":"Siklus Komponen Setiap komponen dalam React memiliki siklus yang dapat kamu amati dan manipulasi selama tiga fase utamanya. Tiga fase tersebut adalah: Mounting, Updating, and Unmounting. Mounting Mounting berarti menempatkan","og_url":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/","og_site_name":"WebHozz Blog","article_published_time":"2023-09-16T05:47:39+00:00","article_modified_time":"2023-10-23T05:16:35+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941"},"headline":"Lifecycle pada React JS","datePublished":"2023-09-16T05:47:39+00:00","dateModified":"2023-10-23T05:16:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/"},"wordCount":784,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","keywords":["Belajar React JS Siklus","Belajar React JS Siklus Pemula","Kursus React JS Siklus Bandung","Kursus React JS Siklus Jakarta","Tutorial React JS Siklus","Tutorial React JS Siklus Pemula"],"articleSection":["Belajar React JS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/","url":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/","name":"Lifecycle pada React JS - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","datePublished":"2023-09-16T05:47:39+00:00","dateModified":"2023-10-23T05:16:35+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","width":750,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/lifecycle-pada-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Lifecycle pada React JS"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/farry\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=12907"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12907\/revisions"}],"predecessor-version":[{"id":12938,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12907\/revisions\/12938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/10127"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=12907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=12907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=12907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}