High
React
Use functional components with hooks
Official
Rule Description
Always use functional components with hooks, not class components:
- Simpler, less boilerplate
- Better TypeScript support
- Easier to test
- Hooks enable code reuse without HOCs
```tsx
// Good
function UserProfile({ userId }: { userId: string }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId).then(setUser);
}, [userId]);
if (!user) return ;
return ;
}
// Avoid class components
class UserProfile extends React.Component { ... }
```
Included in Rulesets
React Standards
28 rules • 1 standard
Vue Best Practices
28 rules • 1 standard
Angular Guidelines
28 rules • 1 standard
Next.js Patterns
28 rules • 1 standard
Express Standards
31 rules • 1 standard
JavaScript Guide
28 rules • 2 standards
TypeScript Guide
28 rules • 4 standards
Code Review Standards
58 rules • 0 standards
Add This Rule
Sign in to add this rule to your workspace
Sign in with GitHubDetails
- Severity
- High
- Category
- React
- Used in
- 8 rulesets