Back to Sanity

Dependency-Based Parallelization

.agents/skills/vercel-react-best-practices/rules/async-dependencies.md

5.24.01.1 KB
Original Source

Dependency-Based Parallelization

For operations with partial dependencies, use better-all to maximize parallelism. It automatically starts each task at the earliest possible moment.

Incorrect (profile waits for config unnecessarily):

typescript
const [user, config] = await Promise.all([fetchUser(), fetchConfig()])
const profile = await fetchProfile(user.id)

Correct (config and profile run in parallel):

typescript
import {all} from 'better-all'

const {user, config, profile} = await all({
  async user() {
    return fetchUser()
  },
  async config() {
    return fetchConfig()
  },
  async profile() {
    return fetchProfile((await this.$.user).id)
  },
})

Alternative without extra dependencies:

We can also create all the promises first, and do Promise.all() at the end.

typescript
const userPromise = fetchUser()
const profilePromise = userPromise.then((user) => fetchProfile(user.id))

const [user, config, profile] = await Promise.all([userPromise, fetchConfig(), profilePromise])

Reference: https://github.com/shuding/better-all