Why should we fix cyclic dependencies?

Cyclic dependencies are likely the root cause of our development server crashes and are also contributing to memory leaks during runtime. These issues primarily occur because types, constants, and enums are not being imported from a common file, leading to circular references between modules.

<aside> 💡 Run npx dpdm —help to make sure dpdm is installed. If it isn’t installed, running npx dpdm should prompt for installing the package.

</aside>

To check the cyclic dependencies introduced in a PR follow the steps below.

  1. Checkout the release branch of repository
  2. Navigate to the client folder run the following command.
cd app/client
npx dpdm "./src/**/*.{js,jsx,ts,tsx}" --circular --warning=false --tree=false | sed 's/^[[:space:]]*[0-9]\\{4\\})[[:space:]]*/  # /' > release_circular_deps.txt
  1. Checkout the PR branch and run the command again. Save the result to a new file
cd app/client
npx dpdm "./src/**/*.{js,jsx,ts,tsx}" --circular --warning=false --tree=false | sed 's/^[[:space:]]*[0-9]\\{4\\})[[:space:]]*/  # /' > pr_circular_deps.txt
  1. Use the following diffing command to check which cyclic dependency got added and removed
diff -u release_circular_deps.txt pr_circular_deps.txt | grep -E '^[+-]' > diff.txt

Any line prefixed with a + indicates that your PR added that cyclic dependency, while a line prefixed with a - indicates that your PR removed that cyclic dependency.

Best Practices

1. Separate Types into Dedicated Files

❌ Don't define types in component or business logic files

// UserProfile.tsx
export interface UserData { ... }
export const UserProfile = () => { ... }

âś… Do create dedicated type files

// types/user.ts
export interface UserData { ... }
// UserProfile.tsx
import { UserData } from '../types/user';