HOC vs cloneElement in 2019 - reactjs

Question

I learned that you could use HOC to only modify the render function when the class logic is the same. I try to do it myself and came up with a solution using this.props.children and cloneElement instead.
I searched on StackOverFlow to find differences between the 2 but the only question about this is from 2016 and React changed since. I was wondering if there is performance issues with one or the other and in 2019 what would be considered "best practice"
Here's with cloneElement:
<Counter>
<ButtonCounter />
</Counter>
<Counter>
<KeyStrokesCounter />
</Counter>
export default class Counter extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
updateCounter = () => {
this.setState(prev => ({
counter: prev.counter + 1
}));
};
render() {
return (
<React.Fragment>
{React.cloneElement(this.props.children, {
clickHandler: this.updateCounter,
counter: this.state.counter
})}
</React.Fragment>
);
}
}
export default class ButtonCounter extends Component {
constructor(props) {
super(props);
console.log('ButtonCounter created lol');
}
render() {
return (
<div>
<button onClick={this.props.clickHandler}>
Clicked {this.props.counter} times
</button>
</div>
);
}
}
And HOC:
<Button />
<InputKeyStroke />
const CounterComponent = OgComp => {
class NewComp extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 42
};
}
incrementCounter = () => {
this.setState(prev => ({
counter: prev.counter + 1
}));
};
render() {
return (
<OgComp
evtHandler={this.incrementCounter}
counter={this.state.counter}
/>
);
}
}
return NewComp;
};
export default CounterComponent;
export default CounterComponent(
class Button extends React.Component {
constructor(props) {
super(props);
console.log('RCONST BUTTON');
}
render() {
return (
<button onClick={this.props.evtHandler}>
Clicked {this.props.counter} times
</button>
);
}
}
);
Is there a best way to do this? The constructor isn't called during each cloneElement event.

Answer 1

This doesn't answer your question but here's a benchmark I found for cloneElement VS render props: https://gist.github.com/nemoDreamer/21412b28dc65d51e2c5c8561a8f82ce1