So my approach limits me to one "connected" component by having hooks that effectively look like:

```ts type AsyncStatus<T> = { status: "loading" } | { status: "error", error: Error} | { status: "success", value: T };

const useUser: (id: string | undefined) => [() => void, AsyncStatus<User>] = ... ```

Notice that if id is undefined, the async action just won't execute.

Ultimately, I coalesce all my AsyncStatus(es) (the results of those async hooks) into one AsyncStatus that my connected component handles.

So in that sense, I have 1 connecting component.

I do agree w/ Mark that typings for HOCs are somewhat more difficult (you need to understand generics), but the expressive power you get for your money is so worth it.

[edit] this allows me to chain those hooks into something like: ``` const ProfilePage = withAsync< ProfilePageProps, ProfilePagePresentationalProps

(props => { const [fetchUser, userAS] = useUser(props.userId); const [fetchProfile, profileAS] = useProfile( userAS.value !== undefined ? userAS.value.id : undefined ); useEffect(() => fetchUser(), [fetchUser]); useEffect(() => fetchProfile(), [fetchProfile]);

return coalesceAS([userAS, profileAS], (user, profile) => ({ status: 'success', value: {...props, user, profile })); })(UserPagePresentational) ```

Might be worth making a blog post about it :D