React.js ~The landscape of data fetching in React~

The landscape of data fetching in React has more options than ever. Here is when each one is the right choice:

Scenario	Approach
Server Component fetching data	async / await directly in the component
Passing async data from Server to Client Component	Create promise on server, use() on client with Suspense
Simple client-side fetch (popup, dialog, one-off display)	use() with a cached promise + Suspense
Complex client state (auto-refetch, pagination, mutations)	TanStack Query or SWR
Computed/derived state from props or other state	useMemo or direct calculation during render
Reading context conditionally	use(SomeContext)
Reading context unconditionally	useContext(SomeContext) : simpler, more familiar
Subscribing to an external store (Redux, Zustand, browser API)	useSyncExternalStore
DOM measurements, event listeners, timers	useEffect : this is what it's actually for