majiayu000 React Patterns Skill
Overview
Modern React patterns, hooks, and state management principles.
Core Principles
1. Component Composition
- Prefer composition over inheritance
- Use children prop for flexibility
- Create compound components for related UI
2. Hooks Best Practices
// Custom hook pattern
function useUser(userId: string) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
fetchUser(userId)
.then(setUser)
.catch(setError)
.finally(() => setLoading(false));
}, [userId]);
return { user, loading, error };
}
3. State Management
- Local state: useState for component-level
- Shared state: Context + useReducer
- Server state: React Query, SWR
- Global state: Zustand, Jotai
4. Performance Patterns
// Memoization
const MemoizedComponent = React.memo(({ data }) => {
return <div>{data.name}</div>;
});
// useMemo for expensive computations
const sortedItems = useMemo(() => {
return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);
// useCallback for stable references
const handleClick = useCallback(() => {
doSomething(id);
}, [id]);
5. Error Boundaries
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logError(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <FallbackUI />;
}
return this.props.children;
}
}
Anti-Patterns to Avoid
- ❌ Prop drilling (use Context instead)
- ❌ Mutating state directly
- ❌ Missing dependency arrays
- ❌ Over-using useEffect
- ❌ Inline function definitions in render