react-best-practices-async-dependencies

Instruction file imported from Abdulsametklc/NetOpsCell (.cursor/rules/react-best-practices-async-dependencies.mdc). Copyright stays with the author.

description: React best practice rule: async-dependencies globs: [".tsx", ".ts", ".jsx", ".js", "app/", "components/"] alwaysApply: false

title: Dependency-Based Parallelization impact: CRITICAL impactDescription: 2-10× improvement tags: 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)
  }
})

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