> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-03/life-cycle-flow/pre-mounting.md).

# 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;
```