title: setState in React based on current state
body: <p>When updating a stateful component in React is it considered a bad practice when a component uses the current state to update the new state.</p>
  
  <p>For example if I have a class that stores whether a filter is open or not in it's state, is one of these options for updating the state more desirable than the other in terms of performance?</p>
  
  <p>Option 1:</p>
  
  <pre><code>class Container extends Component {
      state = {
          show: false
      }
  
      show = () =&gt; this.setState({ show: true })
  
      hide = () =&gt; this.setState({ show: false })
  
      render() {
          &lt;ExternalComponent
              show={this.show}
              hide={this.hide}
          /&gt;
      }
  }
  </code></pre>
  
  <p>Option 2:</p>
  
  <pre><code>class Container extends Component {
      state = {
          show: false
      }
  
      toggleVisibility = () =&gt; this.setState({ show: !this.state.show })
  
      render() {
          &lt;ExternalComponent
              toggleVisibility={this.toggleVisibility}
          /&gt;
      }
  }
  </code></pre>
  
  <p>Option 3:</p>
  
  <pre><code>class Container extends Component {
      state = {
          show: false
      }
  
      setShow = (newVal) =&gt; this.setState({ show: newVal })
  
      render() {
          &lt;ExternalComponent
              setShow={this.setShow}
          /&gt;
      }
  }
  </code></pre>