title: React 16.4 - manual form input fill along with its updates from getDerivedStateFromProps?
body: <p>I face a problem once update on <strong>React 16.4</strong> where we have some breaking changes with <code>getDerivedStateFromProps</code> logic. Now it fires on each component update on both <strong>incoming</strong> and <strong>own</strong> component's props. </p>
  
  <p>So, I've read the docs and manuals, but still can't figure out with cases where form input fields should be based on incoming props (<code>controlled component</code>) and, at the same time, be able to modify by the user own input?</p>
  
  <p>I've also tried this post, but it just covers cases for a one-time update, not the manual input case: <a href="https://stackoverflow.com/questions/51019936/why-getderivedstatefromprops-is-called-after-setstate">Why getDerivedStateFromProps is called after setState?</a></p>
  
  <p>Here is my little code to reproduce:</p>
  
  <pre><code>import PropTypes from 'prop-types'
  import React from 'react'
  
  export class NameEditor extends React.Component {
    static propTypes = {
      currentLevel: PropTypes.number
    }
  
    static defaultProps = {
      currentLevel: 0
    }
  
    constructor(props) {
      super(props)
  
      this.state = {
        currentLevel: 0
      }
    }
  
    static getDerivedStateFromProps(nextProps) {
      return {
        currentLevel: nextProps.currentLevel
      }
    }
  
    _handleInputChange = e =&gt; {
      this.setState({
        currentLevel: e.target.value
      })
    }
  
    render() {
      const { currentLevel } = this.state
  
      return (
          &lt;input
            placeholder={0}
            value={currentLevel}
            onChange={this._handleInputChange}
          /&gt;
      )
    }
  }
  
  export default NameEditor
  </code></pre>