title: optional controlled / uncontrolled React component with conditional React hooks
body: <p>IMO, React Hooks useState is a perfect fit for a pattern to optional using value from props or use own state, but the lint showed some error when I use hook conditionally. </p>
  
  <p><a href="https://codesandbox.io/s/oo03wnw2j5" rel="nofollow noreferrer">Working Example</a></p>
  
  <p>I tried to use hooks with condition as below but with eslint error <code>React hook useState is called conditionally</code>. According to this <a href="https://reactjs.org/docs/hooks-rules.html#explanation" rel="nofollow noreferrer">explanation from doc</a>, <code>React relies on the order in which Hooks are called</code>.</p>
  
  <pre><code>const Counter = ({ value, onChange, defaultValue = 0 }) =&gt; {
    const [count, onCountChange] =
      typeof value === "undefined" ? useState(defaultValue) : [value, onChange];
    return (
      &lt;div&gt;
        {count.toString()}
        &lt;button
          onClick={() =&gt; {
            onCountChange(count + 1);
          }}
        &gt;
          +
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  function App() {
    const [count, onCountChange] = useState(0);
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;
          Uncontrolled Counter
          &lt;Counter /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          Controlled Counter
          &lt;Counter value={count} onChange={onCountChange} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>How can I use hooks to achieve same function as below  class Component ? </p>
  
  <pre><code>class CounterClass extends React.Component {
    state = {
      value: this.props.defaultValue || 0
    };
    render() {
      const isControlled = typeof this.props.defaultValue === "undefined";
      const count = isControlled ? this.props.value : this.state.value;
  
      return (
        &lt;div&gt;
          {count.toString()}
          &lt;button
            onClick={() =&gt; {
              isControlled &amp;&amp;
                this.props.onChange &amp;&amp;
                this.props.onChange(this.props.value + 1);
              !isControlled &amp;&amp; this.setState({ value: this.state.value + 1 });
            }}
          &gt;
            +
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Or this kind props/state optional way in one component is wrong? </p>
  
  <p>I learnt the <code>"defaultValue"</code>, <code>"value"</code>, <code>"onChange"</code> API naming and idea from React JSX <code>&lt;input&gt;</code> component.</p>