Suggest an edit

Improve this article

Refine the answer for “What types of components exist?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. Function Components - the modern standard

These are **ordinary JavaScript functions** that **accept** `props`
and **return JSX** (a description of the interface).

```javascript
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
```

Usage:

```javascript
<Greeting name="Tim" />
```

Features:

- simple, readable, reusable;
- can use **hooks** (`useState`, `useEffect`, `useContext`, etc.);
- have no lifecycle of their own like classes do - instead, logic is implemented through hooks.

---

## 2. Class Components - the old format (before React 16.8)

These are **ES6 classes** that extend `React.Component`.

```javascript
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
```

Features:

- have lifecycle methods (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`, etc.);
- use `this.state` and `this.setState()` to work with state;
- are used less and less today - they have been **replaced by functional components with hooks**.

---

## 3. Higher-Order Components (HOC)

These are **functions that accept a component and return a new component**
(that is, they "wrap" it with additional logic).

```javascript
function withLogger(Component) {
  return function Wrapped(props) {
    console.log('Rendering:', Component.name);
    return <Component {...props} />;
  };
}
```

Usage:

```javascript
const EnhancedGreeting = withLogger(Greeting);
```

Used for:

- reusing logic (for example, authorization, logging, caching);
- working with third-party libraries (Redux's `connect` is an HOC).

> Today HOCs are gradually being replaced by **hooks** and component **composition**.

---

## 4. Container and Presentational Components (a separation pattern)

This is an **architectural approach**, not a different type "in code".

- **Presentational (UI)** component
- is responsible only for display (markup and styles):

```javascript
  const UserCard = ({ name, age }) => (
    <div className="card">
      <h2>{name}</h2>
      <p>{age} years old</p>
    </div>
  );
  ```
- **Container** component
- manages state, logic, requests, and passes data down:

```javascript
  function UserContainer() {
    const [user, setUser] = useState({ name: "Tim", age: 25 });
    return <UserCard name={user.name} age={user.age} />;
  }
  ```

This separation helps:

- write "cleaner" and more reusable UI components;
- test logic separately from presentation.

---

## 5. Controlled and Uncontrolled Components (forms)

Relate to form elements (`input`, `select`, `textarea`).

- **Controlled component** - React fully manages its value through `state`:

```javascript
  const [value, setValue] = useState("");
  return <input value={value} onChange={e => setValue(e.target.value)} />;
  ```
- **Uncontrolled component** - the value is stored in the DOM,
and React reads it through a `ref`:

```javascript
  const inputRef = useRef();
  const handleSubmit = () => console.log(inputRef.current.value);
  return <input ref={inputRef} />;
  ```

---

## 6. Pure Components

These are components that **re-render only when `props` or `state` actually change**.

In functional form:

```javascript
const Greeting = React.memo(({ name }) => <h1>Hello, {name}</h1>);
```

In class form:

```javascript
class Greeting extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```

They help **avoid unnecessary re-renders** and **improve performance**.

---

## 7. Error Boundary (error-catching components)

These are **special class components**
that catch errors in child components
so the whole application doesn't "crash".

```javascript
class ErrorBoundary extends React.Component {
  state = { hasError: false };

componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }

render() {
    if (this.state.hasError) return <h2>Something went wrong</h2>;
    return this.props.children;
  }
}
```

---

## Summary

| Component type | What it does | Example |
|---|---|---|
| **Functional** | Returns JSX through a function | `function Hello()` |
| **Class** | Uses `this.state`, lifecycle methods | `class Hello extends React.Component` |
| **HOC** | Accepts a component and returns a new one | `withLogger(Component)` |
| **Container / Presentational** | Separation of logic and UI | `UserContainer / UserCard` |
| **Controlled / Uncontrolled** | Managing data input | `<input value={...} />` |
| **Pure / React.memo** | Optimized, does not re-render needlessly | `React.memo()` |
| **Error Boundary** | Catches errors of child components | `componentDidCatch` |

---

**In short:**

> In React, all components are essentially divided into **functional** and **class** ones,
> and the other types are **patterns or extensions** of these base forms
> (for example, HOC, container, pure, etc.).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts653 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.