I am not necessarily opposed to setting state from the function body (I know this is an accepted pattern), but it's not clear to me if it's necessary here. Is there some reason this doesn't work?

const prevConnectionStatusRef = React.useRef(connectionStatus);
const attemptRef = React.useRef(0);

if (prevConnectionStatusRef.current !== connectionStatus) {
  if (!source && connectionStatus === 'connected') {
    attemptRef.current++;
  }
  prevConnectionStatusRef.current = connectionStatus;
}

Won't this have the same effect, without requiring additional executions of the function body?

This part seems copy-pasted from Multimedia. Is it possible to instead factor out the part of Multimedia you want?

I think @ginsu also has a need for a component like Multimedia that takes a URI instead of a MediaInfo for his avatars work. Rather than have it copy-pasted in three places I think it would be good to factor out

Kept attempt as state, because it needs to trigger hook and re-render when changed.

Can you clarify further what you mean by this? My impression was that the rerender triggered by the connectionStatus change would update the attempt before rerendering, but I'm guessing you tested this and I'm missing something.

I'm not necessarily opposed to setting state from the function body if it's really necessary, but I'd like to understand why.

Given that both RemoteImage and RemoteImage seem to need this functionality, I'm wondering why you didn't factor it out into LoadableImage

Yes, although that is a draft diff not meant for review

Ref is mutable and non-reactive so it cannot be an effect dependency.

I think it's fine to have a ref's value as a dependency for an effect, eg. attemptRef.current. I don't understand what you mean by "change isn't observed"... I guess you're thinking of passing attemptRef instead of attemptRef.current?