Reactのテキストボックスのフォーカスが外れる問題ではまった

他の画面では正常に動いているReactのカスタムコンポーネントが、特定の画面で呼び出した場合のみ、テキストボックスで入力をするたびにフォーカスが外れる事象に遭遇してはまったのでメモを残しておきます。

色々と試行錯誤したところ、原因としてはカスタムコンポーネントを呼び出しているrenderの書き方の違いによるものでした。
Reactのrender部分はいくつか書き方がありますが、以下で書いているHogeの様に定義し、その中でstateの更新をかけると、テキストボックスのフォーカスが外れます。詳細は追っていませんが、Hogeのスタイルで書くとstateが更新される度にコンポーネントが作り直されているのではないかと思います。

render() {
  const Hoge = () => {
    const props = {
      type: "text",
      value: this.state.hoge,
      onChange: e => this.setState({hoge: e.target.value})
    };
    return <div>hoge<input {...props}/></div>;
  };

  return (
    <div>
      <Hoge/>
      {this._renderFuga()}
    </div>
  );
}

_renderFuga() {
  const props = {
    type: "text",
    value: this.state.fuga,
    onChange: e => this.setState({fuga: e.target.value})
  };
  return <div>fuga<input {...props}/></div>;
}