What is a "presentational component"?

ReactJunior~2 min read

Short definition

A presentational component is a component that is responsible only for the appearance (UI) and contains no business logic or application state.

In other words:

This is a "dumb" component that simply receives data via props and renders it as JSX.

Difference from a container component

Characteristic	Presentational (UI)	Container (Logic)
Main task	Displaying data	Managing data
Where data is stored	In props	In state, context, or the store
State	Almost never	Usually present
Logic (fetch, filters, handlers)	No	Yes
Connection to the server	No	Yes
Reusability	Very high	Limited by context
Example	UserCard, Button, Header	UserContainer, ProductsContainer

Example 1. A simple presentational component

javascript

function UserCard({ name, email }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

Features:

No state (useState).
No side effects (useEffect).
Only displays data.
Receives everything via props.

Usage:

javascript

<UserCard name="Tim" email="tim@example.com" />

Example 2. Separating the container from the presentational component

javascript

function UserContainer() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

  if (!user) return <p>Loading...</p>;

  return <UserCard name={user.name} email={user.email} />;
}

Here:

UserContainer -> logic (fetch, state);
UserCard -> presentation (markup, styles).

This separation keeps the code clean and reusable.

Example 3. A presentational component with children

javascript

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}

Usage:

javascript

<Card title="Profile">
  <UserCard name="Anya" email="anya@example.com" />
</Card>

The Card component doesn't know exactly what's inside; it's simply responsible for the structure and style.

Example 4. A presentational component as a UI library

Most UI components (for example, from shadcn/ui, Material UI, Chakra UI) are presentational components.

Examples:

javascript

<Button variant="primary">Submit</Button>
<Alert type="error">Error!</Alert>
<Modal isOpen>Content</Modal>

None of them manage data state; they simply render what was passed to them.

Example 5. Minimal logic inside

Sometimes minimal UI logic is allowed, for example:

highlighting the selected element;
toggling classes;
local UI effects (hover, active, collapse, etc.).

javascript

function ToggleButton({ active, label }) {
  return (
    <button className={active ? "btn-active" : "btn"}>
      {label}
    </button>
  );
}

This is still "presentational": no state, just a reaction to props.

Why this approach matters

Separation of concerns: logic is separate, presentation is separate.

Reusability: the same UI component can be used in different places.

Easy testing: you can simply verify that it renders the correct JSX for the data.

Clean code: presentational components do not "weigh down" the application's logic.

Summary

What it is	A component that only displays data
Where it stores data	In props
Has state	No (almost never)
Where it's used	Inside container or other UI components
What it contains	JSX, styles, children
Main goal	Separate the visual part from the logical part

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.