Являются ли функциональные компоненты, которые являются свойствами класса, антипаттерном в React?

Question

В существующей базе кода, над которой я работаю, есть несколько мест, в которых функциональный компонент является свойством класса в компоненте React, чтобы избежать необходимости передавать состояние, реквизиты и обратные вызовы дочернему компоненту. Пример приведен ниже, или в CodeSandbox .

import React from "react";
import "./styles.css";

class App extends React.Component {
  state = {
    counter: 0
  };

  ClassPropComponent = () => {
    return (
      <>
        <div>Count is {this.state.counter}</div>
        <button
          onClick={() => {
            this.setState({
              counter: this.state.counter + 1
            });
          }}
        >
          +
        </button>
      </>
    );
  };

  render() {
    return (
      <div className="App">
        <this.ClassPropComponent />
      </div>
    );
  }
}

export default App;

Есть ли что-то по сути не так с этим шаблоном?

1. Я считаю, что это создаст новый экземпляр ClassPropComponent для каждого экземпляра App. Хотя, я полагаю, поскольку это функциональный компонент, дополнительных затрат не будет, если они вообще есть.

2. Есть ли какие-либо опасности или ошибки, связанные с использованием крючков в ClassPropComponent? Насколько я могу судить, он не нарушает ни одно из Правил зацеплений .

3. Есть ли какое-либо преимущество в этом шаблоне перед простой функцией в классе что возвращает JSX? Кажется, единственное отличие состоит в том, что он будет использоваться как компонент вместо вызова функции (например, <this.ClassPropComponent /> против this.renderComponent())?

(следующий раздел частично вне темы c, и, возможно, лучше подойдет для другого вопроса)

Еще один интересный крайний случай происходит, когда у нас есть компонент, который является свойством класса, рендеринг другого компонента, который является свойством класса. Наша кодовая база находится в Typescript, и если мы используем ts-loader, а затем запускаем результат через babel, все работает нормально. Если мы используем @babel/preset-typescript и @babel/preset-react (с @ babel / plugin-offer-class-properties), this не определено в компоненте class prop, представленном другим компонентом prop класса.