react-best-practices

React Best Practices

Modern React development guidelines for building maintainable, performant applications.

When to Use

• Building React applications (Next.js, Vite, CRA)
• Reviewing React code for quality
• Optimizing React app performance
• Learning modern React patterns (hooks, server components)

---

Steps

Step 1: Component Structure

Functional Components Only

// Prefer: Arrow function with explicit return type
const UserCard: React.FC<UserCardProps> = ({ name, email, avatar }) => {
  return (
    <div className="user-card">
      <img src={avatar} alt={`${name}'s avatar`} />
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
};

// Props interface (always define)
interface UserCardProps {
  name: string;
  email: string;
  avatar: string;
  onSelect?: (email: string) => void;
}

File Organization

src/
├── components/       # Reusable UI components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.test.tsx
│   │   └── index.ts
│   └── ...
├── hooks/            # Custom hooks
├── pages/            # Route-level components
├── services/         # API calls
├── types/            # Shared TypeScript types
└── utils/            # Utility functions

Step 2: Hooks Patterns

useState -- Keep State Minimal

// Good: derive values instead of storing them
const [items, setItems] = useState<Item[]>([]);
const totalPrice = items.reduce((sum, item) => sum + item.price, 0); // Derived

// Bad: redundant state
const [items, setItems] = useState<Item[]>([]);
const [totalPrice, setTotalPrice] = useState(0); // Don't do this

useEffect -- Cleanup and Dependencies

useEffect(() => {
  const controller = new AbortController();

  async function fetchData() {
    try {
      const res = await fetch(`/api/users/${userId}`, { signal: controller.signal });
      const data = await res.json();
      setUser(data);
    } catch (err) {
      if (!controller.signal.aborted) setError(err);
    }
  }

  fetchData();
  return () => controller.abort(); // Cleanup
}, [userId]); // Only re-run when userId changes