[bug] component-hook-factories false positives due to missing equivalent static-components rule #1632
Description
Describe the bug
Below is a basic example of a react Higher Order Component, taken from https://www.w3schools.com/react//react_hoc.asp, migrated to typescript. This raises a linting error from @eslint-react/component-hook-factories
Reproduction
import { ComponentType, ReactElement } from 'react';
// This is our HOC - it adds a border to any component
function withBorder<P>(WrappedComponent: ComponentType<P>): ComponentType<P> {
return function NewComponent(props: any): ReactElement { // linting error raised here
return (
<div style={{ border: '2px solid blue', padding: '10px' }}>
<WrappedComponent {...props} />
</div>
);
};
}
interface GreetingProps {
name: string;
}
// Simple component without border
function Greeting({ name }: GreetingProps): ReactElement {
return <h1>Hello, {name}!</h1>;
}
// Create a new component with border
const GreetingWithBorder = withBorder<GreetingProps>(Greeting);
function App() {
return (
<div>
<Greeting name="John" />
<GreetingWithBorder name="Jane" />
</div>
);
}
Expected behavior
This should be no problem if the HOC function is called outside of other react components, to prevent recreating the function on rerender.
My expectation is to be able to define a HOC function without any issue. A violation should be raised only if the HOC function is called inside another component, like below:
function App() {
const GreetingWithBorder = withBorder<GreetingProps>(Greeting); // linting error should be raised here instead
return (
<div>
<Greeting name="John" />
<GreetingWithBorder name="Jane" />
</div>
);
}
Platform and versions
@eslint-react/eslint-plugin@3.0.0
Stack trace
Additional context
No response