.agents/skills/vercel-react-best-practices/rules/async-dependencies.md
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):
const [user, config] = await Promise.all([fetchUser(), fetchConfig()])
const profile = await fetchProfile(user.id)
Correct (config and profile run in parallel):
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.
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