Class vs functional component

ReactJunior~2 min read

1. Syntax

A class component is an ES6 class that extends React.Component and must have a render() method.

javascript

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

A functional component is a plain JS function that takes props and returns JSX.

javascript

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

In other words, a functional component is a "pure function", while a class component is a full object with state and methods.

2. Working with state

In a class component:

javascript

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

In a functional component (hooks):

javascript

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Conclusion: hooks (useState, useEffect, and others) give functional components the ability to have state - previously this was available only to classes.

3. Component lifecycle

Class components have special lifecycle methods:

javascript

class Example extends React.Component {
  componentDidMount() {
    console.log("Mounted");
  }

  componentDidUpdate() {
    console.log("Updated");
  }

  componentWillUnmount() {
    console.log("Unmounted");
  }
}

Functional components do the same thing through hooks (useEffect):

javascript

function Example() {
  useEffect(() => {
    console.log("Mounted or updated");

    return () => console.log("Unmounted");
  }, []);
}

The difference:

classes use methods;
functions use hooks and closures.

4. The `this` context

In classes you must explicitly work with this:

javascript

this.state
this.props
this.setState()
this.handleClick = this.handleClick.bind(this)

In functional components there is no this at all:

javascript

const [count, setCount] = useState(0);

The code becomes simpler, without bind, without context confusion.

5. Using hooks

Hooks are available only in functional components:

javascript

useState, useEffect, useMemo, useCallback, useRef, useContext

Hooks are not available in classes - instead there are the old mechanisms:

state + setState
lifecycle methods
context through Context.Consumer

6. Performance and readability

Comparison	Functional	Class
Code	Short, concise	More verbose
Context	No `this`	Methods must be bound
State	Through hooks (`useState`)	Through `this.state`
Logic	Split by hooks	Scattered across methods
Optimization	`React.memo`, `useMemo`	`PureComponent`, `shouldComponentUpdate`
Testing	Easier	Harder because of `this`

7. Support and relevance

Class components appeared first (React 0.13-15).
Starting with React 16.8 (2019), hooks appeared - and they replaced classes.
Today everything new is written with functional components.
Classes are still supported but are considered "legacy".

8. Example of "the same component" in both styles

Class version:

javascript

class Hello extends React.Component {
  state = { name: "Alex" };

  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

Functional version:

javascript

function Hello() {
  const [name, setName] = useState("Alex");
  return <h1>Hello, {name}</h1>;
}

Same result, but the functional version is simpler, more compact, and clearer.

9. Summary

Criterion	Class component	Functional component
Syntax	Class + `render()`	Plain function
State	Through `this.state`	Through `useState`
Update	`this.setState()`	`setState` from a hook
Lifecycle	Methods (`componentDidMount`)	Hooks (`useEffect`)
`this` context	Present	Absent
Performance	Slower on large trees	Faster and lighter
Support	Old standard	Modern standard
Logic reuse	Through HOC/Render Props	Through hooks

Final definition:

A class component is the "old" way of describing components through classes and lifecycle methods. A functional component is the "new" way through plain functions and hooks - simpler, lighter, and more declarative.

Short Answer

Interview ready

Premium

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