You reach for useQuery every day. You pass a key, get data back, live with the occasional loading flicker. What is the thing underneath that hook actually doing? Let's take it away and rebuild it from scratch. Each screen hands you a tool you don't have yet and a job that tool can't do; whatever you invent to get past the wall is a piece of the runtime that ships as TanStack Query — the textbook names come later.

Start from the honest version. Your page renders <Posts /> up top and <Posts /> in the sidebar — maybe a router put them there, maybe a design system lifted the card into two slots. Each one does what every React tutorial shows: useState for the data, useEffect on mount firing fetch('/movies'). Each one renders its own little spinner while it waits.

Look at the top lane. Two identical GET /movies requests fire within 8ms of each other. The server does the same lookup twice. 42 kilobytes go out over the network, then another 42 kilobytes come back. Two loading spinners appear on screen at the same time, for the same reason, showing the same thing. Nothing in React's per-component model stops this — useState is per-instance by design, and two instances of <Posts /> are, by definition, two independent states.

You could solve one specific case by hoisting the useState to a shared parent and threading props down — classic lift-state-up. But that only helps when the two callers happen to live under the same parent. Your design system puts <Posts /> in the navbar AND the sidebar AND a modal — those components don't share any common ancestor except the app root. You'd have to lift every piece of server data all the way up. That's the escape hatch turning into the main path.

// The textbook approach — each component fetches its own copy.

function Posts() {

  const [posts, setPosts] = useState<Post[] | null>(null)

  useEffect(() => {

    fetch('/movies').then(r => r.json()).then(setPosts)

  }, [])

  if (!posts) return <p>Loading...</p>

  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>

}

// Rendered twice — two fetches fire.

<>

  <Posts />

  <Posts />

</>