How can I prevent duplicate API requests when multiple React components need the same data?

I have a React application where multiple components need to use the same data from an API endpoint.

For example, both ComponentA and ComponentB need data from /api/users. If both components fetch the data independently, the API may receive multiple identical requests.

function ComponentA() {
  // needs users
}
function ComponentB() {
// also needs users
}

What is the recommended way to structure this so that:

1. Only one API request is made when the data is not already available.

2. Both components can reuse the same fetched data.

3. The data can be refreshed when necessary.

4. Components do not have to duplicate the fetching logic.

Would React Context, Redux Toolkit, a custom hook, or a data-fetching library be the preferred approach?

I'm particularly interested in understanding the trade-offs regarding caching, re-fetching, and stale data.