有时候设计一个元件的 props 和 state，会参考 React 的 <input> 的 props: "defaultValue", "value", "onChange" 来达成若 props 有则用 props，若没有则用 component 自有的 state。

可執行範例 [https://codesandbox.io/s/oo03...]

如果用 useState 来设计一个 <Counter> 的话，会报错误"React hook useState is called conditionally"，如 React 文件 "" 所写，React Hook 依赖执行顺序 ( React relies on the order in which Hooks are called ）。

useState <Counter />

const Counter = ({ value, onChange, defaultValue = 0 }) => {
  const [count, onCountChange] =
    typeof value === "undefined" ? useState(defaultValue) : [value, onChange];
  return (
    <div>
      {count.toString()}
      <button
        onClick={() => {
          onCountChange(count + 1);
        }}
      >
        +
      </button>
    </div>
  );
};
function App() {
  const [count, onCountChange] = useState(0);
  return (
    <div className="App">
      <div>
        Uncontrolled Counter
        <Counter />
      </div>
      <div>
        Controlled Counter
        <Counter value={count} onChange={onCountChange} />
      </div>
    </div>
  );
}

如果是 class 元件我会这样写

class <CounterClass />

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 (
      <div>
        {count.toString()}
        <button
          onClick={() => {
            isControlled &&
              this.props.onChange &&
              this.props.onChange(this.props.value + 1);
            !isControlled && this.setState({ value: this.state.value + 1 });
          }}
        >
          +
        </button>
      </div>
    );
  }
}

请问这样的元件设计想法有什么错误吗？
在 React Hook 的写法中，该怎么改善比较好呢？