disallow calling functional components

[dwelle]

Disallow rendering functional components by calling them.

const SomeComponent = () => <div>oi</div>;

// No
export default App () => {
  return SomeComponent();
}

// Yes please
export default App () => {
  return <SomeComponent/>;
}

Hard to say how to identify, but I think that disallowing to call capital-case functions inside jsx/tsx files is a reasonable heuristic.

Note, there's a seemingly duplicate issue #3208 with the proper name, but then talking about something completely different (render functions).

[ljharb]

This would either only be able to detect same-file JSX-returning functions from being called, or, it would have to prevent ALL capital-letter-named functions from being called, since more components are imported from other places.

Given that React, at runtime, will warn about this if the component uses hooks, I'm not sure there's sufficient value in trying to make a lint rule that can only do such an incomplete job.

[dwelle]

[...] it would have to prevent ALL capital-letter-named functions from being called

Only if the component call is a return value of a JSX expression (or itself is a return value of another component as in the OP example). Don't know if feasible to detect.

Given that React, at runtime, will warn about this if the component uses hooks, I'm not sure there's sufficient value in trying to make a lint rule that can only do such an incomplete job.

Cannot reproduce locally, nor in this CSB.

[ljharb]

It's not feasible to detect things across files - so only functions defined in the same file would be able to be warned.

Regarding the hooks warning, hmm, i guess i was under the mistaken impression that they enforced hooks were only called from the top level of a component.

[dwelle]

Regarding the hooks warning, hmm, i guess i was under the mistaken impression that they enforced hooks were only called from the top level of a component.

Yeah, thinking about it, that would rule out custom hooks.

It's not feasible to detect things across files - so only functions defined in the same file would be able to be warned.

Not across files. You detect whether the capital-case function call in current file is made within a JSX expression.

[ljharb]

Right, but how often is that done?