React best practices

---
description: Best practices for React development
globs: **/*.tsx
alwaysApply: false
---

# React Best Practices
Standards for React development. Auto-included for TSX and JSX files.
<rule>
name: react_best_practices
description: Best practices for React development. Auto-included for TSX and JSX files.
globs: ["**/*.{tsx,jsx}"]
filters:
- type: file_extension
pattern: "\.(tsx|jsx)$"
actions:
- type: suggest
message: |
Follow these React best practices:
    1. Component Architecture:
        - Use functional components with hooks instead of class components
        - Keep components small and focused on a single responsibility
        - Extract reusable logic into custom hooks
        - Follow the principle of composition over inheritance
    2. Performance Optimization:
        - Use React.memo for expensive components
        - Implement useMemo for expensive computations
        - Use useCallback for function props
        - Avoid unnecessary re-renders
        - Implement proper key props in lists
        - Use pure components with proper memoization:
``<code>typescript
// Bad: Component without memoization that re-renders unnecessarily
const UserList = ({ users }) => {
return (
<ul>
{users.map(user => <UserCard key={user.id} user={user} />)}
</ul>
);
};
        - // Good: Component with React.memo and proper comparison
import { memo } from 'react';
import isEqual from 'fast-deep-equal';
        - const UserCard = ({ user }) => {
return (
<div className="card">
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
);
};
        - // Use fast-deep-equal for complex objects/arrays
export const MemoizedUserCard = memo(UserCard, (prevProps, nextProps) => {
return isEqual(prevProps.user, nextProps.user);
});
        - // For simple prop comparisons, you can omit the second argument
export const SimpleMemoizedUserCard = memo(UserCard);
</code>`<code>
        - Apply memoization strategically:
            - Memoize components that render often but change infrequently
            - Memoize expensive calculations
            - Memoize event handlers passed to child components
            - Avoid premature memoization for simple components
        - Use fast-deep-equal for complex props comparison:
</code>`<code>typescript
// Bad: Not memoizing properly (reference equality won't work for objects)
const MemoizedComponent = React.memo(ExpensiveComponent);
        - // Good: Using fast-deep-equal for proper deep comparison
import isEqual from 'fast-deep-equal';
        - const MemoizedComponent = React.memo(ExpensiveComponent, (prev, next) => {
// Only re-render if the props are deeply equal
return isEqual(prev, next);
// Or to invert the logic (re-render if NOT equal):
// return !isEqual(prev, next);
});
</code>``
    3. State Management:
        - Use useState for local component state
        - Implement useReducer for complex state logic
        - Use Context API for global state when appropriate
        - Keep state as close as possible to where it's used
    4. Type Safety:
        - Use TypeScript for prop type definitions
        - Implement proper interface definitions
        - Use proper event types for handlers
        - Define explicit return types for functions
    5. Code Organization:
        - Group related components in feature folders
        - Separate business logic from UI components
        - Use proper naming conventions
        - Implement proper file structure
examples:
- input: |
// Bad: Class Component
class UserProfile extends React.Component {
render() {
return <div>{this.props.name}</div>
}
}
- // Good: Functional Component
const UserProfile = ({ name }: { name: string }) => {
return <div>{name}</div>
}
output: "Use functional components with hooks instead of class components"
- input: |
// Bad: Inline function causing re-renders
<button onClick={() => handleClick(id)}>Click me</button>
- // Good: Memoized callback
const handleClick = useCallback((id) => {
// handle click
}, []);
output: "Use useCallback for function props to prevent unnecessary re-renders"
- input: |
// Bad: Component that re-renders unnecessarily with complex objects
const UserDetails = ({ user }) => {
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
<UserSettings settings={user.settings} />
</div>
);
};
- // Good: Memoized component with fast-deep-equal
import { memo } from 'react';
import isEqual from 'fast-deep-equal';
- const UserDetails = ({ user }) => {
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
<UserSettings settings={user.settings} />
</div>
);
};
- export const MemoizedUserDetails = memo(UserDetails, (prev, next) => {
// Only re-render if user object deeply changes
return isEqual(prev.user, next.user);
});
output: "Use memo with fast-deep-equal for proper deep comparison of complex props"
- input: |
// Bad: Expensive calculation recalculated on every render
const ExpensiveComponent = ({ data }) => {
const processedData = expensiveCalculation(data);
return <div>{processedData}</div>;
};
- // Good: Memoized calculation
const MemoizedExpensiveComponent = ({ data }) => {
const processedData = useMemo(() => expensiveCalculation(data), [data]);
return <div>{processedData}</div>;
};
- // Even better: Component with both memo and useMemo
const ExpensiveComponent = ({ data }) => {
const processedData = useMemo(() => expensiveCalculation(data), [data]);
return <div>{processedData}</div>;
};
- export const MemoizedExpensiveComponent = memo(
ExpensiveComponent,
(prev, next) => isEqual(prev.data, next.data)
);
output: "Use both useMemo for calculations and memo for component rendering when dealing with expensive operations"
metadata:
priority: high
version: 1.1
</rule>