Rules
jsx-no-iife
Full Name in eslint-plugin-react-x
react-x/jsx-no-iifeFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-iifeDescription
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(() => {
const filteredThings = things.filter(callback);
if (filteredThings.length === 0) {
return <Empty />;
}
return filteredThings.map((thing) => <Thing key={thing.id} data={thing} />);
}, [things]);
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>
);
}