AlbertP1207

тот подход, что у вас, называется "render props". сравнение их по предпочтительности с HOC - предмет постоянного холивара остроконечников с тупоконечниками.

глобально всё можно и так, и так сделать, смотрите как в вашем случае удобнее.

JSX это синтаксический сахар над вызовом React.createElement. Когда вы пишите <A />, вы делаете вызов:
React.createElement(A, null);
React под капотом создает экземпляр этого компонента.

То что у вас называется просто композиция.
HOC создает новый компонент каждый раз когда вы его используете на основе того компонента который ему передали.

HOC выглядел бы так:

const HocA = makeHOC(A)
const HocB = makeHOC(B)

//... где-то в рендере:
<HocA />

//где-то еще
<HocB />

В чем разница?
В том что в вашем случае ваш Hoc не зависит от того что ему передали и использует A как свойство.
Если вы поменяете A на B то Hoc просто получит новые пропсы и сохранит старый стейт. Вы работаете с инстансом Hoc не меняя его класс (тип)

Когда вы делаете правильный Hoc - то сначала вы создаете два "типа" компонента один для A (HocA) другой для B (HocB)
потом рендерите уже их как самостоятельные компоненты ничего дополнительно не передавая.

Нет. HOC это функция, которая принимает компонент и возвращает новый компонент, так или иначе использующий переданный компонент.