Fetching server product data directly inside component effects
usually makes the component responsible for too many distributed-systems concerns.

- a valid local synchronization effect
- a temporary implementation
- an accidental query cache
- a race condition waiting to happen
- a server-state architecture smell

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<unknown>(null);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(`/api/users/${userId}`)
      .then((response) => response.json())
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!user) return null;

  return <ProfileView user={user} />;
}

- no server rendering data
- no preload
- no cache
- no request dedupe
- no stale response guard
- no abort policy
- no retry policy
- no invalidation policy
- no background refresh
- no stale-while-revalidate
- no optimistic reconciliation
- no cross-screen consistency

- connect/disconnect WebSocket
- subscribe/unsubscribe browser event
- start/stop timer
- integrate third-party widget
- update document title
- imperatively control external object

Component says: for this prop/state, start this external request.

- identity
- cache
- freshness
- invalidation
- dedupe
- retry
- cancellation
- optimistic mutation
- request sharing
- SSR/preload
- hydration
- observability

function CaseDetail({ caseId }: { caseId: string }) {
  const [caseData, setCaseData] = useState<Case | null>(null);

  useEffect(() => {
    getCase(caseId).then(setCaseData);
  }, [caseId]);

  return <CaseView data={caseData} />;
}

T0: caseId = A, request A starts
T1: user switches to caseId = B, request B starts
T2: request B resolves, UI shows case B
T3: request A resolves late, UI shows case A incorrectly

useEffect(() => {
  let ignore = false;

  async function load() {
    const result = await getCase(caseId);
    if (!ignore) {
      setCaseData(result);
    }
  }

  load();

  return () => {
    ignore = true;
  };
}, [caseId]);

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const response = await fetch(`/api/cases/${caseId}`, {
        signal: controller.signal,
      });

      const result = await response.json();
      setCaseData(result);
    } catch (error) {
      if (controller.signal.aborted) return;
      setError(error);
    }
  }

  load();

  return () => {
    controller.abort();
  };
}, [caseId]);

- server may have already processed request
- non-fetch async APIs may not support abort
- mutation commands may not be safely abortable
- response may still need request identity check

function Header() {
  const user = useCurrentUserEffectFetch();
  return <Avatar user={user} />;
}

function Sidebar() {
  const user = useCurrentUserEffectFetch();
  return <UserMenu user={user} />;
}

['currentUser'] -> one in-flight request shared by observers

function CasePage({ caseId }: { caseId: string }) {
  const caseData = useCaseEffectFetch(caseId);

  if (!caseData) return <Spinner />;

  return <AuditTrail caseId={caseData.id} />;
}

function AuditTrail({ caseId }: { caseId: string }) {
  const auditTrail = useAuditTrailEffectFetch(caseId);
  return <AuditTrailView items={auditTrail} />;
}

T0: render CasePage
T1: effect starts case request
T2: case response returns
T3: render AuditTrail
T4: effect starts audit request
T5: audit response returns

1. Server returns HTML with loading shell.
2. Browser downloads JS.
3. React hydrates.
4. Effect runs.
5. Fetch starts.
6. Data arrives.
7. Real content appears.

const [loading, setLoading] = useState(false);

- first load with no data
- background refetch with existing data
- refetch after error
- retry after failure
- mutation pending
- pagination next page loading
- dependent query waiting for input

type ReadModel<T> =
  | { status: 'idle' }
  | { status: 'pending' }
  | { status: 'success'; data: T; isFetching: boolean; isStale: boolean }
  | { status: 'error'; error: unknown }
  | { status: 'error-with-data'; data: T; error: unknown; isFetching: false };

const [error, setError] = useState<unknown>(null);

- unauthenticated
- unauthorized
- validation error
- conflict
- not found
- timeout
- offline
- server error
- partial failure
- stale version
- rate limit

401 unauthenticated:
  redirect/login refresh

403 unauthorized:
  show permission message

409 conflict:
  reload/merge/retry flow

422 validation:
  attach field errors

500:
  retry/report fallback

const userCache = new Map<string, User>();

export async function getCachedUser(userId: string) {
  const cached = userCache.get(userId);
  if (cached) return cached;

  const user = await getUser(userId);
  userCache.set(userId, user);
  return user;
}

- When does cache expire?
- How do listeners know it changed?
- How do in-flight requests dedupe?
- How are errors cached?
- How does logout clear it?
- How does mutation update it?
- How does SSR avoid cross-request leakage?
- How does tab focus trigger refetch?
- How does memory get released?

function useCaseNaive(caseId: string) {
  const [data, setData] = useState<Case | null>(null);
  const [error, setError] = useState<unknown>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    setError(null);

    getCase(caseId)
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [caseId]);

  return { data, error, loading };
}

function useCaseWithIgnore(caseId: string) {
  const [state, setState] = useState<{
    data: Case | null;
    error: unknown;
    loading: boolean;
  }>({ data: null, error: null, loading: false });

  useEffect(() => {
    let ignore = false;

    setState((prev) => ({ ...prev, loading: true, error: null }));

    getCase(caseId)
      .then((data) => {
        if (!ignore) {
          setState({ data, error: null, loading: false });
        }
      })
      .catch((error) => {
        if (!ignore) {
          setState((prev) => ({ ...prev, error, loading: false }));
        }
      });

    return () => {
      ignore = true;
    };
  }, [caseId]);

  return state;
}

function useCaseWithRequestId(caseId: string) {
  const requestIdRef = useRef(0);
  const [state, setState] = useState<ReadState<Case>>({ status: 'idle' });

  useEffect(() => {
    const requestId = ++requestIdRef.current;

    setState({ status: 'pending' });

    getCase(caseId)
      .then((data) => {
        if (requestId !== requestIdRef.current) return;
        setState({ status: 'success', data });
      })
      .catch((error) => {
        if (requestId !== requestIdRef.current) return;
        setState({ status: 'error', error });
      });
  }, [caseId]);

  return state;
}

type ResourceRecord<T> = {
  promise: Promise<T> | null;
  data: T | null;
  error: unknown;
};

const caseRecords = new Map<string, ResourceRecord<Case>>();

function getCaseRecord(caseId: string): ResourceRecord<Case> {
  let record = caseRecords.get(caseId);

  if (!record) {
    record = { promise: null, data: null, error: null };
    caseRecords.set(caseId, record);
  }

  return record;
}

function fetchCaseOnce(caseId: string) {
  const record = getCaseRecord(caseId);

  if (record.promise) {
    return record.promise;
  }

  record.promise = getCase(caseId)
    .then((data) => {
      record.data = data;
      record.error = null;
      return data;
    })
    .catch((error) => {
      record.error = error;
      throw error;
    })
    .finally(() => {
      record.promise = null;
    });

  return record.promise;
}

type Listener = () => void;

const listenersByKey = new Map<string, Set<Listener>>();

function subscribe(key: string, listener: Listener) {
  let listeners = listenersByKey.get(key);

  if (!listeners) {
    listeners = new Set();
    listenersByKey.set(key, listeners);
  }

  listeners.add(listener);

  return () => {
    listeners!.delete(listener);
  };
}

function notify(key: string) {
  listenersByKey.get(key)?.forEach((listener) => listener());
}

function getCaseSnapshot(caseId: string) {
  const record = getCaseRecord(caseId);

  if (record.data) {
    return { status: 'success' as const, data: record.data };
  }

  if (record.error) {
    return { status: 'error' as const, error: record.error };
  }

  return { status: 'pending' as const };
}

type ResourceRecord<T> = {
  data: T | null;
  error: unknown;
  promise: Promise<T> | null;
  updatedAt: number | null;
};

function isStale(record: ResourceRecord<unknown>, staleTimeMs: number) {
  if (record.updatedAt === null) return true;
  return Date.now() - record.updatedAt > staleTimeMs;
}

- staleTime
- cacheTime/gcTime
- refetch on focus
- refetch on reconnect
- manual invalidation
- retry
- backoff

- rendering a read model
- collecting user intent
- owning local interaction state
- composing child views

- cache identity
- stale policy
- dedupe
- retries
- invalidation
- hydration
- garbage collection
- optimistic transaction log

useEffect(() => {
  analytics.connect();
}, []);

useEffect(() => {
  const connection = analytics.connect();

  return () => {
    connection.disconnect();
  };
}, []);

- route loader knows needed data before component renders
- server component reads data on server
- query prefetch starts on hover/navigation intent
- framework fetches in parallel for matched routes

Render first, discover data need later.

useEffect(() => {
  fetchCases(filters).then(setCases);
}, [filters]);

- `filters` may be unstable object identity
- dependency identity may not equal server resource identity
- no cache identity exists outside this component
- invalidation cannot target this effect by key

['cases', { status, assigneeId, page, sort }]

When should this synchronization re-run?

Which server snapshot is this?

useEffect(() => {
  getCase(caseId).then(setCaseData);
}, [caseId]);

async function approve() {
  await approveCase(caseId);
}

- manually call a refetch callback
- toggle some state dependency
- emit event bus event
- force remount
- put data in context/store
- use server-state cache invalidation

- page params
- accumulated pages
- dedupe per page
- next page availability
- loading next page vs loading first page
- error for next page while existing pages remain
- refetch all pages
- remove/insert item across pages after mutation

const [pages, setPages] = useState<CasePage[]>([]);
const [page, setPage] = useState(1);
const [loadingInitial, setLoadingInitial] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [hasNextPage, setHasNextPage] = useState(true);
const [error, setError] = useState<unknown>(null);

catch(() => loadAgain())

- which errors are retryable?
- how many attempts?
- exponential backoff?
- jitter?
- pause when offline?
- retry on reconnect?
- user-visible retry button?
- preserve existing data while retrying?

- token expired
- refresh token request
- original request retry
- refresh failure -> logout
- prevent multiple simultaneous refreshes
- clear caches by tenant/user

- until component unmounts?
- until tab closes?
- for 5 minutes?
- forever until logout?
- while there are active observers?
- persisted between sessions?

- load metadata for a user-selected local file
- call browser/device API after component appears
- fetch non-shared preview data for an isolated widget
- one-off integration with third-party imperative SDK
- fire-and-clean subscription to an external object

- no SSR/preload need
- no cross-screen sharing
- no invalidation graph
- no dedupe requirement
- no optimistic mutation
- race/cancellation handled
- component truly owns lifecycle

function FileMetadataPreview({ file }: { file: File | null }) {
  const [metadata, setMetadata] = useState<FileMetadata | null>(null);

  useEffect(() => {
    if (!file) {
      setMetadata(null);
      return;
    }

    let ignore = false;

    readFileMetadata(file).then((result) => {
      if (!ignore) {
        setMetadata(result);
      }
    });

    return () => {
      ignore = true;
    };
  }, [file]);

  return <MetadataView metadata={metadata} />;
}

- Same data needed by multiple components
- Data should survive navigation
- Data should be prefetched
- Initial HTML should include data
- Mutation should invalidate it
- Stale data can be displayed while refetching
- Request should dedupe
- Retry policy matters
- Pagination/infinite query exists
- User can edit/mutate the resource
- Auth/permission/conflict errors matter
- Offline/reconnect/focus refetch matters
- Cache needs devtools/observability

Route /cases/:caseId
  -> load case detail before rendering route

- route-level data
- navigation-aware loading
- SSR framework integration
- parallel route matching

- data needed in initial HTML
- secrets/server-only logic
- avoiding client waterfall
- reducing client JS data orchestration

- cached client-side reads
- background refetch
- mutations
- optimistic updates
- pagination
- cross-screen consistency

- browser API resource
- WebSocket-backed resource
- local-first sync object
- embedded SDK state

function useCase(caseId: string) {
  // still effect-based, but isolated
}

- request identity
- cleanup/abort
- discriminated read state
- stable error handling

const caseKey = (caseId: string) => ['case', caseId] as const;

function useCase(caseId: string) {
  return useQuery({
    queryKey: caseKey(caseId),
    queryFn: () => getCase(caseId),
  });
}

function useApproveCase() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: approveCase,
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ['case', variables.caseId] });
      queryClient.invalidateQueries({ queryKey: ['cases'] });
    },
  });
}

function CaseDetailPage({ caseId }: { caseId: string }) {
  const [caseData, setCaseData] = useState<Case | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<unknown>(null);
  const [isApproveModalOpen, setApproveModalOpen] = useState(false);

  useEffect(() => {
    // network lifecycle
  }, [caseId]);

  async function approve() {
    // mutation lifecycle + invalidation
  }

  return ...;
}

function CaseDetailPage({ caseId }: { caseId: string }) {
  const caseRead = useCase(caseId);
  const approveCase = useApproveCase();
  const [isApproveModalOpen, setApproveModalOpen] = useState(false);

  return (
    <CaseDetailView
      caseRead={caseRead}
      isApproveModalOpen={isApproveModalOpen}
      onOpenApproveModal={() => setApproveModalOpen(true)}
      onCloseApproveModal={() => setApproveModalOpen(false)}
      onConfirmApprove={() => approveCase.mutate({ caseId })}
    />
  );
}

useCase:
  server read lifecycle

useApproveCase:
  server command lifecycle

local state:
  modal visibility

view:
  rendering and user intent

- resource identity
- cache lifetime
- invalidation
- error boundary
- mutation lifecycle
- preloading strategy

How should UI wait for async data at render boundary?

When is this server snapshot stale?

- pending state
- form submissions
- optimistic UI
- async transition handling

- which reads are stale?
- should data be revalidated?
- should cache be updated from action result?
- should optimistic state rollback?

- mount timing
- async resolution
- cleanup
- prop changes
- out-of-order responses
- unmount before response
- duplicate fetches
- loading/error transitions

- read hook behavior
- mutation invalidation
- view states
- integration journey

- Which query is slow?
- Which endpoint retries often?
- Which cache invalidation is missing?
- Which mutation causes stale UI?
- Which screen waterfalls data?
- Which request was cancelled?
- Which error type dominates?

- query key
- duration
- result type
- retry count
- cache hit/miss
- stale time
- invalidation source
- mutation lifecycle

If the data is server-owned and may be reused, invalidated, prefetched,
refetched, mutated, cached, or shared, do not let a random component effect own it.

The component truly owns the external synchronization lifecycle.

useEffect(() => {
  getCase(caseId).then(setCase);
}, [caseId]);

const caseRead = useCase(caseId);

function useCase(caseId: string) {
  return useQuery({
    queryKey: ['case', caseId],
    queryFn: () => getCase(caseId),
  });
}

await approveCase(caseId);
await reloadCase();
await reloadCases();

await approveCase(caseId);
invalidateCaseRelatedSnapshots(caseId);

const [openCases, setOpenCases] = useState<Case[]>([]);

useEffect(() => {
  setOpenCases(cases.filter(isOpen));
}, [cases]);

const openCases = useMemo(() => cases.filter(isOpen), [cases]);

const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);

type ReadState<T> =
  | { status: 'pending' }
  | { status: 'success'; data: T; isFetching: boolean }
  | { status: 'error'; error: unknown };

eventBus.emit('case:changed', caseId);

queryClient.invalidateQueries({ queryKey: ['case', caseId] });
queryClient.invalidateQueries({ queryKey: ['cases'] });

A. valid local synchronization
B. should become custom hook
C. should become route loader
D. should become server-state query
E. should become mutation/action flow

1. request A starts
2. props change
3. request B starts
4. request B resolves
5. request A resolves late

UI must show B, never A.

mutation: approveCase(caseId)
invalidates:
  - ['case', caseId]
  - ['cases', filters?]
  - ['dashboardMetrics']
  - ['auditTrail', caseId]

1. Fetching in effects is allowed but limited.
2. Effects run after render, so they are late for initial data loading.
3. Direct effect fetching does not provide cache, preload, dedupe, retry, or invalidation.
4. Race conditions must be handled explicitly if you fetch in effects.
5. Abort and ignore are useful but not complete architecture.
6. Effect dependency arrays are not query keys.
7. Mutation invalidation is the real design problem.
8. If you keep adding cache features around effects, use a server-state abstraction.
9. Use effects for local external synchronization.
10. Use loaders/server-state cache/resource stores for product server data.