Component Design

Preview — 3 of 10 questions

What is the key difference?

javascript

// Presentational component — pure display:
function UserCard({ name, email, avatarUrl }) {
  return (
    <div className="user-card">
      <img src={avatarUrl} alt={name} />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

// Container component — data and logic:
function UserCardContainer({ userId }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  if (!user) return <Skeleton />;
  return <UserCard name={user.name} email={user.email} avatarUrl={user.avatar} />;
}

ABoth components are equivalent — the distinction is just naming

BPresentational components must be class components

CContainer components should never use hooks

DPresentational components are pure render functions — they receive props and render UI with no side effects; Container components manage data fetching and state, then pass data down; this separation makes presentational components reusable and easy to test

What is the composition pattern?

javascript

// ❌ Configuration-based:
<Modal
  title="Confirm"
  content="Are you sure?"
  footer={<Button>OK</Button>}
  showCloseButton={true}
  closeButtonPosition="top-right"
/>

// ✅ Composition-based:
<Modal>
  <Modal.Header>Confirm</Modal.Header>
  <Modal.Body>Are you sure?</Modal.Body>
  <Modal.Footer>
    <Button variant="primary">OK</Button>
  </Modal.Footer>
</Modal>

AConfiguration-based components are always more flexible

BComposition with children (and compound components) is more flexible — consumers control the exact structure; no need to predict all configuration options; consumers can add custom elements without new props

CChildren composition prevents using TypeScript with components

DComposition requires React.cloneElement always

How do you define default props in modern React?

javascript

// Old way (class component syntax):
// static defaultProps = { variant: "primary", size: "medium" };

// Modern way — default parameters:
function Button({ 
  children, 
  variant = "primary", 
  size = "medium",
  disabled = false,
  onClick,
}) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

ADefault parameter values in the function signature are the modern way — they're standard JavaScript, work with TypeScript destructuring types, and are tree-shaken; defaultProps is deprecated for functional components

BdefaultProps on the function object is the preferred modern approach

CDefault props must be defined in PropTypes

DYou cannot have default values for optional callbacks like onClick

Answer all 10 questions (7 more), see explanations for every answer, and track your score.