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

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Dependency-Based Parallelization	CRITICAL	2-10× improvement	async, parallelization, dependencies, better-all

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):

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