[feat] New rule: No IIFEs in JSX

[kachkaev]

Describe the problem

I came across a component that looked like this:

function SomeComponent() {
  // hooks etc

  return (
    <SomeJsx>
      <SomeMoreJsx />

      {(() => {
        const filteredThings = things.filter(callback);

        if (filteredThings.length === 0) {
          return <Empty />;
        }

        return filteredThings.map((thing) => <Thing key={thing.id} data={thing} />);
      })()}

      <SomeMoreJsx />
    </SomeJsx>
  );
}

So there is an IIFE (Immediately Invoked Function Expression) inside JSX, which is used to define some additional variables and logic.

Technically, this is valid JS, but it is not conventional inside React components. IIFEs in JSX may be hard to follow and they will probably not optimized by React compiler, which means slower app rendering.

Describe the solution you'd like

I'd like to have a rule that detects IIFEs in JSX and flags them. If we need to define additional variables, we should do it before JSX. If the logic is too heavy and we want to keep it separate, we can create a new React component.

Alternatives considered

It may be possible to ban IIFEs via no-restricted-syntax but that’s harder to configure and maintain.

Additional context

No response