lowhygiene
Empty or Null Components
Finds React components that return null or empty fragments.
Why This Is Bad
This code runs but displays nothing. It wastes processing power and indicates abandoned or incomplete work.
How To Fix
Either implement the component or delete it:
tsx
// Before (WASTEFUL)
export function EmptyComponent() {
return null;
}
export function FragmentOnly() {
return <></>;
}
// Options:
// 1. Implement it properly
export function UsefulComponent() {
return (
<div>
<h1>Actual content</h1>
</div>
);
}
// 2. Delete the file entirely if not needed
// 3. If intentionally empty (e.g., placeholder), add a comment:
/** @todo Implement user profile component */
export function UserProfile() {
return null;
}When You Pass This Check
All your components render meaningful content!
Check If Your Repo Has This Issue
Our free scanner will detect this and 17 other common issues in your codebase.