react

react Best Practices

This guide outlines the non-negotiable standards for building React applications within our team. Adherence ensures predictable behavior, simplifies debugging, and enables future optimizations.

1. Core React Principles: Purity & Rules of Hooks

Components and Hooks must be pure. They should always return the same output given the same inputs (props, state, context) and not cause side effects during rendering. Obey the Rules of Hooks without exception.

❌ BAD: Impure component / Side effect in render

function ProductList({ products }) {
  // ❌ Modifies external data during render
  products.sort((a, b) => a.name.localeCompare(b.name));
  return (/* ... */);
}

function MyComponent() {
  // ❌ Hook called conditionally
  if (Math.random() > 0.5) {
    const [count, setCount] = useState(0);
  }
  return (/* ... */);
}

✅ GOOD: Pure component / Correct Hook usage

import { useMemo, useState } from 'react';

function ProductList({ products }) {
  // ✅ Sort data immutably or memoize if expensive
  const sortedProducts = useMemo(() => 
    [...products].sort((a, b) => a.name.localeCompare(b.name)),
    [products]
  );
  return (/* ... */);
}

function MyComponent() {
  // ✅ Hooks always at the top level
  const [count, setCount] = useState(0); 
  // ... conditional logic after hooks
  return (/* ... */);
}

2. Code Organization & Naming

Organize code by feature using the bulletproof-react pattern. Use TypeScript (.tsx) for all components.

• One Component Per File: Except for small, pure, stateless components closely related to a parent.
• Naming:
  • Components: PascalCase (e.g., UserProfile.tsx)
  • Custom Hooks: use prefix + PascalCase (e.g., useAuth.ts)
  • Functions/Variables: camelCase
  • CSS Classes: kebab-case (via CSS Modules or utility classes)

✅ GOOD: Feature-based structure

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── AuthButton.tsx
│   │   ├── hooks/
│   │   │   └── useAuth.ts
│   │   └── api/auth.ts
│   └── products/
│       ├── components/
│       │   ├── ProductCard.tsx
│       │   └── ProductList.tsx
│       └── hooks/useProducts.ts
├── components/ui/  // Reusable, generic UI components
│   ├── Button.tsx
│   └── Modal.tsx
└── App.tsx