react-patterns

React Patterns

Modern React (18+) patterns for production. TypeScript assumed.

When to Use

• Building new React components or pages
• Reviewing React code for quality or performance
• Debugging re-renders or stale state
• Deciding where to put state

Component Design

Small, focused, composable:

// Bad — one component doing too much
function UserDashboard({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  const [orders, setOrders] = useState([]);
  const [notifications, setNotifications] = useState([]);
  // 300 lines of JSX mixing user info, orders table, notification bell...
}

// Good — composed from focused pieces
function UserDashboard({ userId }: { userId: string }) {
  return (
    <DashboardLayout>
      <UserProfile userId={userId} />
      <OrderHistory userId={userId} />
      <NotificationCenter userId={userId} />
    </DashboardLayout>
  );
}

Hooks Patterns

Data Fetching

// Custom hook — logic separate from UI
function useUser(userId: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;   // prevent state update after unmount
    setLoading(true);
    fetchUser(userId)
      .then(data => { if (!cancelled) setUser(data); })
      .catch(err => { if (!cancelled) setError(err); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [userId]);

  return { user, loading, error };
}

// Use it in the component — clean separation
function UserProfile({ userId }: { userId: string }) {
  const { user, loading, error } = useUser(userId);
  if (loading) return <Skeleton />;
  if (error) return <ErrorMessage error={error} />;
  if (!user) return null;
  return <div>{user.name}</div>;
}

Use React Query / TanStack Query instead of manual useEffect for data fetching in real apps: