React Clean Code

Principles for clean React code.

Single Responsibility

// Bad - component does too much
function UserDashboard() {
  // Fetch users
  // Fetch posts
  // Handle auth
  // Render everything
}

// Good - split responsibilities
function UserDashboard() {
  return (
    <>
      <UserList />
      <PostList />
    </>
  );
}

DRY (Don't Repeat Yourself)

// Bad - repeated code
<button onClick={handleClick} style={{...}}>Submit</button>
<button onClick={handleCancel} style={{...}}>Cancel</button>

// Good - reusable component
function Button({ onClick, children, variant }) {
  return <button onClick={onClick} className={variant}>{children}</button>;
}

Meaningful Names

// Bad
const d = new Date();
const arr = users.map(u => u.n);

// Good
const currentDate = new Date();
const userNames = users.map(user => user.name);

Keep Components Small

// Aim for < 200 lines per component
// If larger, split into smaller components

Early Returns

function User({ user }) {
  if (!user) return <div>No user</div>;
  if (user.loading) return <Spinner />;
  if (user.error) return <Error />;

  return <div>{user.name}</div>;
}

Remember

• One responsibility per component
• Don't repeat code
• Use meaningful names
• Keep components focused
• Early returns for readability

Next: Learn performance profiling!