mirror of
https://github.com/duthaho/claudekit.git
synced 2026-07-31 00:37:46 +03:00
109 lines
2.0 KiB
Markdown
109 lines
2.0 KiB
Markdown
# React
|
|
|
|
## Description
|
|
|
|
React component patterns, hooks, and state management best practices.
|
|
|
|
## When to Use
|
|
|
|
- Building React components
|
|
- Using React hooks
|
|
- Component state management
|
|
|
|
---
|
|
|
|
## Core Patterns
|
|
|
|
### Functional Components
|
|
|
|
```tsx
|
|
interface UserCardProps {
|
|
user: User;
|
|
onSelect?: (user: User) => void;
|
|
}
|
|
|
|
export function UserCard({ user, onSelect }: UserCardProps) {
|
|
return (
|
|
<div className="card" onClick={() => onSelect?.(user)}>
|
|
<h3>{user.name}</h3>
|
|
<p>{user.email}</p>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Hooks
|
|
|
|
```tsx
|
|
// useState
|
|
const [count, setCount] = useState(0);
|
|
|
|
// useEffect
|
|
useEffect(() => {
|
|
const subscription = subscribe();
|
|
return () => subscription.unsubscribe();
|
|
}, [dependency]);
|
|
|
|
// useMemo
|
|
const expensive = useMemo(() => compute(data), [data]);
|
|
|
|
// useCallback
|
|
const handleClick = useCallback(() => {
|
|
doSomething(id);
|
|
}, [id]);
|
|
```
|
|
|
|
### Custom Hooks
|
|
|
|
```tsx
|
|
function useUser(id: string) {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetchUser(id)
|
|
.then(setUser)
|
|
.finally(() => setLoading(false));
|
|
}, [id]);
|
|
|
|
return { user, loading };
|
|
}
|
|
```
|
|
|
|
### Context Pattern
|
|
|
|
```tsx
|
|
const UserContext = createContext<User | null>(null);
|
|
|
|
export function UserProvider({ children }: { children: ReactNode }) {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
|
|
return (
|
|
<UserContext.Provider value={user}>
|
|
{children}
|
|
</UserContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useUser() {
|
|
const context = useContext(UserContext);
|
|
if (!context) throw new Error('useUser must be within UserProvider');
|
|
return context;
|
|
}
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. Keep components small and focused
|
|
2. Use TypeScript for props
|
|
3. Memoize expensive computations
|
|
4. Clean up effects properly
|
|
5. Lift state up when needed
|
|
|
|
## Common Pitfalls
|
|
|
|
- **Missing dependencies in hooks**: Include all dependencies
|
|
- **State updates on unmounted**: Use cleanup functions
|
|
- **Prop drilling**: Use context or composition
|