# How to write clean props in reactjs

In reactjs passing ( writing ) props seems very simple. Until it comes to scalablity.

Hello,
I'm **Vikash**.

### Source ( Unorganized )

```tsx
interface UserCardProps {
  user: UserDomainModel; 
  
  isSmall?: boolean;
  isLarge?: boolean;
  isDarkMode?: boolean;
  hasBorder?: boolean;
  hasShadow?: boolean;
  
  setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
  setUserData: React.Dispatch<React.SetStateAction<UserDomainModel>>;
  
  showEditButton?: boolean;
  showFollowButton?: boolean;
  showDeleteButton?: boolean;
  
  onAction?: (type: string, data: any) => void;
}

export const UserProfileCard = ({
  user,
  isSmall,
  isLarge,
  setIsEditing,
  showEditButton,
  onAction,
}: UserCardProps) => {
  return (
    <div className={`card ${isSmall ? 'sm' : isLarge ? 'lg' : 'md'}`}>
      <img src={user.profile.meta.avatar.cdnUrl} alt={user.personalInfo.firstName} />
      <h3>{user.personalInfo.firstName} {user.personalInfo.lastName}</h3>
      
      {showEditButton && (
        <button onClick={() => setIsEditing(true)}>Edit</button>
      )}
      <button onClick={() => onAction?.('DELETE', user.id)}>Delete</button>
    </div>
  );
};
```

### Source ( Clean )

```tsx
interface UserCardProps {
  userId: string;
  name: string;
  avatarUrl?: string;

  size?: 'sm' | 'md' | 'lg';
  variant?: 'flat' | 'outlined' | 'elevated';

  onSelect?: (userId: string) => void;

  actionSlot?: React.ReactNode;
}

export const UserProfileCard = ({
  userId,
  name,
  avatarUrl,
  size = 'md',
  variant = 'flat',
  onSelect,
  actionSlot,
}: UserCardProps) => {
  return (
    <div 
      className={`card card--${size} card--${variant}`}
      onClick={() => onSelect?.(userId)}
    >
      {avatarUrl && <img src={avatarUrl} alt={name} />}
      <h3>{name}</h3>
      
      {/* Slot rendering keeps child clean of button logic */}
      {actionSlot && <div className="card__actions">{actionSlot}</div>}
    </div>
  );
};
```

---

Writing better props solves so many hurdles in future debugging and keeps the development flow smooth and predictable.

**Thanks for Reading**