# Pre Mounting

## `componentWillMount() Deprecated`  <a href="#pre-mounting-with-componentwillmount" id="pre-mounting-with-componentwillmount"></a>

Now that the props and state are set, we finally enter the realm of Life Cycle methods. The first true life cycle method called is `componentWillMount()`. This method is only called one time, which is before the initial render. Since this method is called before `render()` our Component will not have access to the Native UI (DOM, etc.). We also will not have access to the children `refs`, because they are not created yet.

The `componentWillMount()` **is a chance for us to handle configuration, update our state, and in general prepare for the first render.** At this point, props and initial state are defined. We can safely query `this.props` and `this.state`, knowing with certainty they are the current values. This means we can start performing calculations or processes based on the prop values.+

```
import React from 'react';
import classNames from 'classnames';
class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mode: null } ;
  }
  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    }
    this.setState({ mode });
  }
  render() {
    return (
      <div className={ classNames('person', this.state.mode) }>
        { this.props.name } (age: { this.props.age })
      </div>
    );
  }
}
Person.defaultProps = { age: 'unknown' };
export default Person;
```

In the example above we call `this.setState()` and update our current state before render. If we need state values on calculations passed in `props`, this is where we should do the logic.

**\*\*\*\*Avoid async initialization in `componentWillMount()****`**

`componentWillMount()` is invoked immediately before mounting occurs. It is called before `render()`, therefore setting state in this method will not trigger a re-render. Avoid introducing any side-effects or subscriptions in this method.

Make async calls for component initialization in `componentDidMount` instead of `componentWillMount`

```
function componentDidMount() {
  axios.get(`api/messages`)
    .then((result) => {
      const messages = result.data
      console.log("COMPONENT WILL Mount messages : ", messages);
      this.setState({
        messages: [...messages.content]
      })
    })
}
```

#### We can make such API calls in componentDidMount&#x20;

```
import React from 'react';
class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mode: null } ;
  }
  componentWillMount() {
   // this can be used to initlize state 
    this.setState({ mode : [] });
  }
  componentDidMount() {
  // this emthod can be used to make API calls using axios or fetch
   axios.get(`api/messages`)
    .then((result) => {
      this.setState({
        mode: result.data
      })
    })
}
  render() {
    return (
      <div> // play with data recived from API
      </div>
    );
  }
}
export default Person;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tkssharma.gitbook.io/react-training/day-03/life-cycle-flow/pre-mounting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.