Apa itu Component Lifecycle dalam React?

Component lifecycle dalam React merujuk pada serangkaian metode yang dipanggil pada berbagai tahap siklus hidup sebuah komponen. Metode ini memungkinkan pengembang untuk mengeksekusi kode pada titik-titik tertentu selama masa hidup komponen, seperti saat komponen di-mount, di-update, atau di-unmount dari DOM.

Metode Utama Component Lifecycle:

componentDidMount: Dipanggil setelah komponen dipasang (mount) ke DOM.
componentDidUpdate: Dipanggil setelah komponen diperbarui (update).
componentWillUnmount: Dipanggil tepat sebelum komponen dilepas (unmount) dari DOM.

Contoh Komponen Kelas dengan Lifecycle Methods

Berikut adalah contoh komponen React yang menggunakan ketiga lifecycle methods ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Component Lifecycle</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

      class LifecycleDemo extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            count: 0
          };
          console.log('Constructor: Component is being created.');
        }

        componentDidMount() {
          console.log('ComponentDidMount: Component has been mounted.');
        }

        componentDidUpdate(prevProps, prevState) {
          console.log('ComponentDidUpdate: Component has been updated.');
        }

        componentWillUnmount() {
          console.log('ComponentWillUnmount: Component is about to be unmounted.');
        }

        incrementCount = () => {
          this.setState({ count: this.state.count + 1 });
        };

        render() {
          return (
            <div>
              <h1>Count: {this.state.count}</h1>
              <button onClick={this.incrementCount}>Increment</button>
            </div>
          );
        }
      }

      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            showComponent: true
          };
        }

        toggleComponent = () => {
          this.setState({ showComponent: !this.state.showComponent });
        };

        render() {
          return (
            <div>
              <button onClick={this.toggleComponent}>
                {this.state.showComponent ? 'Hide' : 'Show'} Component
              </button>
              {this.state.showComponent && <LifecycleDemo />}
            </div>
          );
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );

    </script>
</body>
</html>

Penjelasan Kode

Constructor:
- Dipanggil saat komponen pertama kali dibuat. Biasanya digunakan untuk menginisialisasi state atau mengikat metode.
componentDidMount:
- Dipanggil setelah komponen di-mount ke DOM.
- Biasanya digunakan untuk melakukan operasi asinkron seperti mengambil data dari API atau mengatur event listener.
componentDidUpdate:
- Dipanggil setelah komponen diperbarui, baik karena perubahan state atau props.
- Berguna untuk menangani pembaruan yang tergantung pada perubahan tertentu pada state atau props.
componentWillUnmount:
- Dipanggil tepat sebelum komponen dilepas dari DOM.
- Berguna untuk membersihkan event listener, membatalkan permintaan jaringan, atau membersihkan sumber daya lainnya.
App Component:
- Komponen ini digunakan untuk menunjukkan cara toggle LifecycleDemo komponen, memanggil componentWillUnmount ketika komponen di-hide.

Sumber

Lifecycle methods sangat penting untuk mengelola perilaku komponen pada berbagai tahap siklus hidupnya, memungkinkan pengembang untuk menangani operasi asinkron, melakukan pembaruan, dan membersihkan sumber daya dengan tepat.

PreviousApa itu Event Handling dalam React?NextApa itu Hooks dalam React?

Last updated 9 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Component Lifecycle</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class LifecycleDemo extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; console.log('Constructor: Component is being created.'); } componentDidMount() { console.log('ComponentDidMount: Component has been mounted.'); } componentDidUpdate(prevProps, prevState) { console.log('ComponentDidUpdate: Component has been updated.'); } componentWillUnmount() { console.log('ComponentWillUnmount: Component is about to be unmounted.'); } incrementCount = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <h1>Count: {this.state.count}</h1> <button onClick={this.incrementCount}>Increment</button> </div> ); } } class App extends React.Component { constructor(props) { super(props); this.state = { showComponent: true }; } toggleComponent = () => { this.setState({ showComponent: !this.state.showComponent }); }; render() { return ( <div> <button onClick={this.toggleComponent}> {this.state.showComponent ? 'Hide' : 'Show'} Component </button> {this.state.showComponent && <LifecycleDemo />} </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html>