React Component Patterns

Build maintainable React components using modern patterns.

Functional Components with Hooks

Always prefer functional components over class components:

import { useState, useEffect, useCallback } from 'react';

interface UserProps { userId: string; onUpdate?: (user: User) => void; }

export function UserProfile({ userId, onUpdate }: UserProps) { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState(true);

useEffect(() => { fetchUser(userId).then(setUser).finally(() => setLoading(false)); }, [userId]);

const handleSave = useCallback(async (data: UserData) => { const updated = await updateUser(userId, data); setUser(updated); onUpdate?.(updated); }, [userId, onUpdate]);

if (loading) return <Skeleton />; if (!user) return <NotFound />;

return <UserForm user={user} onSave={handleSave} />; }

Custom Hooks

Extract reusable logic into custom hooks:

function useAsync<T>(asyncFn: () => Promise<T>, deps: any[]) { const [state, setState] = useState<AsyncState<T>>({ loading: true, error: null, data: null, });

useEffect(() => { setState(s => ({ ...s, loading: true })); asyncFn() .then(data => setState({ loading: false, error: null, data })) .catch(error => setState({ loading: false, error, data: null })); }, deps);

return state; }

Component Composition

Use composition over prop drilling:

<Card> <Card.Header>Title</Card.Header> <Card.Body>{content}</Card.Body> <Card.Footer> <Button>Action</Button> </Card.Footer> </Card>