Exporting in React higher order components - reactjs

Question

function logProps(WrappedComponent) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
return LogProps;
}
class FancyButton extends React.Component {
focus() {
// ...
}
// ...
}
// Rather than exporting FancyButton, we export LogProps.
// It will render a FancyButton though.
export default logProps(FancyButton);
I have taken these pieces of code from the react documentation, however i am confused about what actually happens during
export default logProps(FancyButton);
My thoughts are that it probably calls the function logProps which in React is considered a higher order component which in that case it should being with capital letter to avoid ambiguity.
The logProp function defines a class component LogProps, the class component LogProps renders an argument component FancyButton. The class component LogProps is then returned from the function.
import FancyButton from './FancyButton';
const ref = React.createRef();
// The FancyButton component we imported is the LogProps HOC.
// Even though the rendered output will be the same,
// Our ref will point to LogProps instead of the inner FancyButton component!
// This means we can't call e.g. ref.current.focus()
<FancyButton
label="Click Me"
handleClick={handleClick}
ref={ref}
/>;
The returnedcomponent(LogProps, FancyButton) from the function logProps is then imported and instantiated at
<FancyButton
label="Click Me"
handleClick={handleClick}
ref={ref}
/>
Is this correct?

Answer 1

Is this correct?
Almost.
As stated in docs, Higher Order Components:
is a function that takes a component and returns a new component.
HOCs name don't start with capital letter.
There's no need to name the returned component.
To simplify, the HOC function basically just returns a new and enhanced component. That's it.
This will also work:
// camel case
function logProps(WrappedComponent) {
// no name
return class extends React.Component {
render() {
return <WrappedComponent {...this.props} {...this.someEnhancements} />;
}
}
}