I created a a box similar to twitter using react. I was looking at the react documentation found several component life cycles but not sure which one I should use to improve my code performance: `componentDidMount` or `componentWillMount`?

When I type something in my text box I see an update in the console printing the text box value. Can anyone help me understand which method to use and when in this case?

<https://jsfiddle.net/c9zv7yf5/2/>

```
class TwitterBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enteredTextBoxvalue : '' };
      this.handleChange = this.handleChange.bind(this);

  }

  handleChange(event) {
    this.setState({enteredTextBoxvalue: event.target.value});   

    if((event.target.value).length > 3) {

      this.setState({className : 'wholeContainer'});
      //console.log("long characters");
    }
  }

  render() {
      return (<div>Hello {this.props.name}
              <textarea className={this.state.className}
                value={this.state.enteredTextBoxvalue}
                onChange = {this.handleChange}>
                there should be only 140 characters
            </textarea>
      </div>);
  }
}

ReactDOM.render(
  <TwitterBox name="World" />,
  document.getElementById('container')
);

```