title: State directly on "this"
body: <p>A lot of people use properties directly on <code>this</code> (<em>e.g</em> <code>this.clickCount</code>) instead of <code>this.state</code> object and sometimes there's like 20 different properties attached directly to <code>this</code>. </p>
  
  <p>Is <code>this.state</code> purely for organization or is there something else about it? Why are so many people / projects not using <code>this.state</code>? </p>
  
  <p>Both following examples work  exactly the same way.</p>
  
  <hr>
  
  <h2>Code example with state:</h2>
  
  <pre class="lang-js prettyprint-override"><code>class Clicker extends React.Component {
  
      constructor() {
          super()
  
          this.state = {
              clickCount: 0
          }
  
          this._onClick= this._onClick.bind(this)
      }
  
      render() {
          return (
  
              &lt;button onClick={this._onClick}&gt;
                  Clicked {this.state.clickCount} times
              &lt;/button&gt;
          )
      }
  
      _onClick() {
          this.setState({
              clickCount: this.state.clickCount + 1
          })
      }
  }
  </code></pre>
  
  <h2>Code example without state:</h2>
  
  <pre class="lang-js prettyprint-override"><code>class Clicker extends React.Component {
  
      constructor() {
          super()
  
          this._onClick= this._onClick.bind(this)
      }
  
      render() {
          return (
  
              &lt;button onClick={this._onClick}&gt;
                  Clicked {this.clickCount ? this.clickCount : 0} times
              &lt;/button&gt;
          )
      }
  
      _onClick() {
          this.clickCount = (this.clickCount ? this.clickCount : 0) + 1
      }
  }
  </code></pre>