"Manage this across multiple components or routes" — whatever "this" is (data fetching, loading state, auth, a subscription) the answer is the same principle: don't duplicate it — extract it once and share it.

1. Extract logic into a custom hook

If several components do the same data-fetching / state logic, pull it into a custom hook:

function useUser(userId) {
  const [state, setState] = useState({ status: "loading", data: null });
  useEffect(() => {
    const controller = new AbortController();
    fetchUser(userId, controller.signal).then(/* ... */);
    return () => controller.abort();
  }, [userId]);
  return state;
}

Now every component/route calls useUser(id) — one implementation, consistent loading/error/cleanup behavior everywhere.

2. Use a data layer for server state

For fetching specifically, React Query / SWR is the multi-component answer: query keys mean two components requesting the same data share one cached request (dedup), refetch consistently, and get uniform loading/error states. No per-route boilerplate.

3. Centralize genuinely shared state

Cross-cutting state — auth user, theme, feature flags — goes in Context or a store (Zustand/Redux) at the app root, so any route reads it without prop-drilling or refetching.

4. Route-level patterns

• Code-split per route — React.lazy + Suspense, so each route only loads its own code.
• Shared layout components — a <DashboardLayout> wrapping multiple routes handles common chrome, auth guards, and shared data once.
• Route loaders — React Router's loader (or Next.js server components / loaders) fetch a route's data before render, centralizing the fetch + error handling per route declaratively.
• Error boundaries per route — so one route crashing doesn't take down the app.

5. The principle

DRY the logic, not just the markup. The failure mode this question targets is copy-pasting the same useEffect-fetch-loading-error block into 10 components — they drift, bugs get fixed in some but not others. One hook / one query / one provider = one place to fix.

The framing

"Whatever 'this' is, the move is the same: extract it once and share it. Shared logic becomes a custom hook so every component calls one implementation. For server data specifically, a query library shares cached requests across components by key. Genuinely global state — auth, theme — lives in context or a store at the root. At the route level, I code-split, use shared layouts and route loaders to centralize fetching and error handling, and put error boundaries per route. The anti-pattern I'm avoiding is duplicating the same effect-and-state block everywhere so it drifts."