What types of components exist?

ReactJunior~2 min read

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.).

Short Answer

Interview ready

Premium

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