Unable to use hook in HOC for functional component - reactjs

Question

Using HOC to render functional component ie. SampleComponent here does work for me.
const SampleComponent: FC = () => {
return (<div>Hello World</div>);
};
export default HOC({ component: SampleComponent });
And HOC is->
const HOC = ({ component: Component }) => {
return (() => <Component/>);
}
However I want to render this component conditionally , something like this-
<div>
{!id ? ( <SomeOtherComponent prop1={'hello'} prop2={'world'} /> ) : ( <Component /> )}
</div>
Here id is coming as a response from graphql query hook, which again i am unable to use in HOC function.

Answer 1

For starters, hooks are meant to be a replacement for HOC.
However, you can definitely use hooks in a HOC which is a function component. Only thing, you need to ensure is that you are using hook in a component that is rendered and not a function.
For instance use a hook like below is incorrect since you do not render HOC component but use it like const X = HOC(Component);
const HOC = ({ component: Component }) => {
const id = useQuery(query);
return (() => <Component/>);
}
The correct way to do it would be
const HOC = ({ component: Component }) => {
return () => {
const id = useQuery(query);
return (<div>
{!id ? ( <SomeOtherComponent prop1={'hello'} prop2={'world'} /> ) : ( <Component /> )}
</div>)
}
}
Working sample demo
However when you implement it like above, you are likely to receive a ESLINT warning because ESLINT is not intelligent enough yet to detect how the component is used.
You can disable the warning for such scenarios