# solid/components-return-once
Disallow early returns in components. Solid components only run once, and so conditionals should be inside JSX.
This rule is **a warning** by default.
[View source](../src/rules/components-return-once.ts) ยท [View tests](../test/rules/components-return-once.test.ts)
See [this issue](https://github.com/solidjs-community/eslint-plugin-solid/issues/24) for rationale.
## Tests
### Invalid Examples
These snippets cause lint errors, and some can be auto-fixed.
```js
function Component() {
if (condition) {
return ;
}
return ;
}
const Component = () => {
if (condition) {
return ;
}
return ;
};
const Component = () => {
if (condition) {
return ;
}
return ;
function hoisted() {}
};
function Component() {
return Math.random() > 0.5 ? Big!
: Small!
;
}
// after eslint --fix:
function Component() {
return <>{Math.random() > 0.5 ? Big!
: Small!
};
}
function Component() {
return Math.random() > 0.5 ? Big!
: "Small!";
}
// after eslint --fix:
function Component() {
return <>{Math.random() > 0.5 ? Big!
: "Small!"};
}
function Component() {
return Math.random() > 0.5 ? (
Big! No, really big!
) : (
Small!
);
}
// after eslint --fix:
function Component() {
return (
0.5} fallback={Small!
}>
Big! No, really big!
);
}
function Component(props) {
return props.cond1 ? (
Condition 1
) : Boolean(props.cond2) ? (
Not condition 1, but condition 2
) : (
Neither condition 1 or 2
);
}
// after eslint --fix:
function Component(props) {
return (
Neither condition 1 or 2}>
Condition 1
Not condition 1, but condition 2
);
}
function Component(props) {
return !!props.cond && Conditional
;
}
// after eslint --fix:
function Component(props) {
return (
Conditional
);
}
function Component(props) {
return props.primary || {props.secondaryText}
;
}
HOC(() => {
if (condition) {
return ;
}
return ;
});
```
### Valid Examples
These snippets don't cause lint errors.
```js
function Component() {
return ;
}
function someFunc() {
if (condition) {
return 5;
}
return 10;
}
function notAComponent() {
if (condition) {
return ;
}
return ;
}
callback(() => {
if (condition) {
return ;
}
return ;
});
function Component() {
const renderContent = () => {
if (false) return <>;
return <>;
};
return <>{renderContent()};
}
function Component() {
function renderContent() {
if (false) return <>;
return <>;
}
return <>{renderContent()};
}
function Component() {
const renderContent = () => {
const renderContentInner = () => {
// ifs in render functions are fine no matter what nesting level this is
if (false) return;
return <>;
};
return <>{renderContentInner()};
};
return <>;
}
function Component() {
return <>{hoisted()};
function hoisted() {
return "hoisted";
}
}
function Component() {
return <>;
const hoisted = "hoisted";
}
function Component() {
return <>;
class Hoisted {}
}
```