Rules
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@beta
react-x/jsx-no-iife
Full Name in @eslint-react/eslint-plugin@beta
@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>
);
}