jsx-no-iife

This rule is experimental and may change in the future or be removed. It is not recommended to use it in production code at this time.

Full Name in eslint-plugin-react-x

react-x/jsx-no-iife

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-no-iife

Features

🧪

Description

Disallows IIFE in JSX elements.

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

Examples

Failing

function MyComponent() {
  // 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>
  );
}

Passing

function MyComponent() {
  // hooks etc

  const thingsList = things.filter(callback);

  return (
    <SomeJsx>
      <SomeMoreJsx />
      {thingsList.length === 0
        ? <Empty />
        : thingsList.map((thing) => <Thing key={thing.id} data={thing} />)}
      <SomeMoreJsx />
    </SomeJsx>
  );
}

function MyComponent() {
  // hooks etc

  const thingsList = useMemo(() => things.filter(callback), [things, callback]);

  return (
    <SomeJsx>
      <SomeMoreJsx />
      {thingsList.length === 0
        ? <Empty />
        : thingsList.map((thing) => <Thing key={thing.id} data={thing} />)}
      <SomeMoreJsx />
    </SomeJsx>
  );
}

function MyComponent() {
  // hooks etc

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

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

    return filteredThings.map((thing) => <Thing key={thing.id} data={thing} />);
  }, [things, callback]);

  return (
    <SomeJsx>
      <SomeMoreJsx />
      {thingsList}
      <SomeMoreJsx />
    </SomeJsx>
  );
}

Passing But Not Recommended

function MyComponent() {
  // hooks etc

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

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

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

  return (
    <SomeJsx>
      <SomeMoreJsx />
      {thingsList}
      <SomeMoreJsx />
    </SomeJsx>
  );
}