react-patterns

React Patterns

Best practices for React development: functional components, hooks, state management, performance, and accessibility.

Component Rules

1. Always use functional components — never class components for new code
2. One component per file — name the file the same as the component (PascalCase)
3. Export components as named exports — default exports only for pages/routes
4. Colocate related files — keep Component.tsx, Component.test.tsx, and Component.module.css together
5. Props interface above the component — name it ComponentNameProps

// Good
interface UserCardProps {
  user: User;
  onSelect: (id: string) => void;
  variant?: "compact" | "full";
}

export function UserCard({ user, onSelect, variant = "full" }: UserCardProps) {
  return ( /* ... */ );
}

// Bad — default export, inline props, class component
export default class UserCard extends React.Component<{user: any}> { /* ... */ }

Hooks Patterns

Custom Hooks

1. Prefix with use — useAuth, useDebounce, useLocalStorage
2. Extract shared logic into custom hooks — if two components share stateful logic, extract it
3. Return tuples for simple hooks, objects for complex ones

// Simple: return tuple
function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue((v) => !v), []);
  return [value, toggle];
}

// Complex: return object
function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [loading, setLoading] = useState(true);
  // ... fetch logic
  return { data, error, loading, refetch };
}

Hook Rules

1. Never call hooks conditionally — all hooks must run on every render
2. Use useCallback for functions passed to children — prevents unnecessary re-renders
3. Use useMemo only for expensive computations — don't wrap everything
4. Prefer useReducer over useState when state transitions are complex