React Class Component vs Functional Component

Recently, I was helping a team of junior developers in New York build a small React dashboard for tracking sales data.

Some of them were using class components, while others preferred functional components with hooks. This created confusion, so I decided to walk them through both approaches.

In this tutorial, I’ll show you the difference between class and functional components in React. I’ll also share practical examples you can use right away.

What is a Class Component?

A class component in React is built using JavaScript classes. It comes with built-in lifecycle methods and uses this.state to manage state.

Method 1 – Create a Class Component

Here’s a simple class component that displays a counter.

import React, { Component } from "react";

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

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

  render() {
    return (
      <div>
        <h2>Class Component Counter</h2>
        <p>Current Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

export default CounterClass;

I executed the above example code and added the screenshot below.

This method uses a constructor to initialize the state. We then update the state using this.setState() inside the increment method.

What is a Functional Component?

A functional component is just a JavaScript function that returns JSX. Before React Hooks, functional components were stateless. But now, they can handle state and side effects easily.

Method 2 – Create a Functional Component with Hooks

Here’s the same counter example, but this time using a functional component.

import React, { useState } from "react";

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

  return (
    <div>
      <h2>Functional Component Counter</h2>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default CounterFunction;

I executed the above example code and added the screenshot below.

This method uses the useState hook to manage state in a functional component. The setCount function updates the state directly without using this.

Compare Lifecycle Methods vs Hooks

Class components use lifecycle methods like componentDidMount, while functional components use hooks like useEffect.

Method 3 – Fetch Data in a Class Component

Here’s an example where we fetch US job data from an API when the component mounts.

import React, { Component } from "react";

class JobsClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      jobs: [],
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/us-jobs")
      .then((response) => response.json())
      .then((data) => this.setState({ jobs: data }));
  }

  render() {
    return (
      <div>
        <h2>US Jobs (Class Component)</h2>
        <ul>
          {this.state.jobs.map((job, index) => (
            <li key={index}>{job.title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default JobsClass;

I executed the above example code and added the screenshot below.

Here, we used componentDidMount to fetch data after the component renders. The fetched job list is then displayed inside the component.

Method 4 – Fetch Data in a Functional Component

Now, let’s do the same with a functional component using useEffect.

import React, { useState, useEffect } from "react";

function JobsFunction() {
  const [jobs, setJobs] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/us-jobs")
      .then((response) => response.json())
      .then((data) => setJobs(data));
  }, []);

  return (
    <div>
      <h2>US Jobs (Functional Component)</h2>
      <ul>
        {jobs.map((job, index) => (
          <li key={index}>{job.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default JobsFunction;

Here, we used the useEffect hook to fetch data when the component mounts. The empty dependency array [] ensures the request runs only once.

Performance and Readability

From my experience, functional components are easier to read and test. Class components are still useful in legacy codebases, but most modern React projects in the USA (especially startups) prefer functional components with hooks.

Which One Should You Use?

If you’re starting a new project today, use functional components. They’re simpler, more modern, and fully supported by React. Class components are still valid, but they’re slowly being phased out.

When I first moved from class components to functional ones, it felt like a big shift. But once I got comfortable with hooks, I never looked back.

So, if you’re still using class components, try rewriting one of your smaller features with functional components. You’ll see how much cleaner and faster your code becomes.

You may read:

• Build a React Modal Component Example
• What is a React Component?
• React Component Naming Conventions
• Top React UI Component Libraries to Build Modern Web Apps

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/