# Lifecycle (लाईफ साईकल)

रियाक्टमा सम्पुर्ण कम्पोनेन्टहरुले बिभिन्न चरण पार गर्ने गर्दछन त्यसलाई नै लाईफसाईकल गर्दछ  । यद्दपी यसमा कुन पनि कुन चरणमा जाने भनेर एउटा निश्चीत नियम हुन्छ । componenetDidMount, componentWillMount आदी रियाक्ट लाईफ साईकलका उदारण हुन । 

{% code lineNumbers="true" %}

```jsx
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { favoritecolor: "red" };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ favoritecolor: "yellow" });
    }, 1000);
  }
  render() {
    return <h1>My Favorite Color is {this.state.favoritecolor}</h1>;
  }
}

ReactDOM.render(<Header />, document.getElementById("root"));
```

{% endcode %}

[कोडपेनमा हेर्न यहाँ क्लिक गर्नुहोला । ](https://codepen.io/hyphenab/pen/mdLqygW)<br>

रियाक्टजेस को अफिसियल वेबसाईठमा लाईफ साइकलको बारेमा राम्रो उदारण दिएको छ । यसलाई हेरौ ।&#x20;

{% code lineNumbers="true" %}

```jsx
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
ReactDOM.render(<Clock />, document.getElementById("root"));
```

{% endcode %}

माथीको उदारणलाई [कोडपेनमा हेर्ने हो](https://codepen.io/hyphenab/pen/qBYVdWO) भने यसले कम्पोनेन्ट एक्जुक्युट भएको समय (current time) मात्र देखाउछ । यसलाई जिवन्तता प्रदान गर्नको लागी लाईफसाईकलको प्रयोग गर्न सकिन्छ ।&#x20;

माथिको उदारणमा हामीले रियाक्ट डोम मा clock भन्ने कम्पोनेन्ट पहिलो पटक रेन्डर गर्दा टाईमेर सेटअप गरेका थियौ । रियाक्टजेएस मा यसलाई माउन्टिङ्ग (`componentDidMount`) भनिन्छ । कुनै अवश्था उक्त टाईमरलाई सबन्द गर्नु पर्ने पनि हुन्छ त्यसलाई रियाक्टमा अनमाउन्टिङ्ग (`componentWillUnmount`) भनिन्छ । यि दुबै मेथडहरुलाई क्लास भित्र राख्न पर्छ ।

{% code lineNumbers="true" %}

```javascript
componentDidMount() {

}
componentWillUnmount() {

}
```

{% endcode %}

माथि उल्लेखीत नामका मेथडहरुलाई लाईफसाईकल मेथड भनिन्छ ।  डोममा कम्पोनेन्टको आउटपुट रेन्डर हुदाँ componentDidMount() भन्ने मेथड एक्जीक्युट हुन्छ भने त्यसलाई स्थगित गर्नु पर्दा componentWillUnmount() मेथडको प्रयोग गरीन्छ ।e

{% code lineNumbers="true" %}

```jsx
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
ReactDOM.render(<Clock />, document.getElementById("root"));
```

{% endcode %}

सबैभन्दा पहिलो उदारणमा करेन्ट टाईम देखाउथ्यो भने सबैभन्दा अन्तिमको उदारणमा करेन्ट टाइम आफै अपडेट भइ रहेको देखीन्छ । यो नै रियाक्ट लाइफसाईकलको राम्रो उदारण हो ।&#x20;