Function vs Class Component in React JS: Which One Should You Use? ~ Fun Programming

Once you dive into React, you’ll quickly come across two ways to build components: Function Components and Class Components.

They both can display UI, receive props, and manage state. But the syntax, behavior, and style can be pretty different.

What Is a React Component?

A component is a building block of your UI in React. It’s like a LEGO piece that you can reuse, arrange, and customize as needed. Buttons, navbars, pages — they can all be components.

Two Styles: Function vs Class

In React, you can write components in two ways:

Function Component – Looks like a regular JavaScript function.
Class Component – Uses ES6 class syntax and object-oriented patterns.

Examples:

Function Component


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

Class Component


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

Props Work the Same


<Greeting name="John" />

In Function:


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

In Class:


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

Managing State

Before React 16.8, only class components had state. Now function components can use Hooks like useState.

Function + useState


function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

Class Component


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

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

Lifecycle vs useEffect

Class components use lifecycle methods like componentDidMount. Function components use useEffect.

Class


componentDidMount() {
  console.log("Component mounted!");
}

Function


useEffect(() => {
  console.log("Component mounted!");
}, []);

Why Were Classes Used More in the Past?

Before Hooks, all advanced features required class components. That’s why older tutorials and codebases use them heavily.

Advantages of Function Components

Modern and clean syntax
Uses powerful Hooks
Easier to read and test
Recommended by React today

Advantages of Class Components

Familiar to OOP developers
More explicit lifecycle methods
Still useful in legacy projects

Comparison Table

Feature	Function Component	Class Component
Syntax	Simpler, modern	Verbose, traditional
State	useState()	this.state
Lifecycle	useEffect()	componentDidMount, etc.
Performance	Lighter	Slightly heavier
React Docs	Preferred	Legacy support

When to Use Which?

Use Function Component If:

New project
Want to use Hooks
Prefer concise code

Use Class Component If:

Updating legacy code
Need class-based patterns

Mixing Components

You can absolutely mix both function and class components in the same app. React supports both styles side-by-side.

Function Components Make Testing Easier


render(<Counter />);

No this, no constructor, just pure logic.

Example with Function + Hook


function App() {
  const [theme, setTheme] = useState('light');

  return (
    <div className={theme}>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
    </div>
  );
}

Hook Rules to Remember

Call hooks at the top level (not in conditionals)
Order matters — don’t rearrange hooks
Only call hooks in React functions

Custom Hook Example


function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

Both function and class components are valid. But today, function components with hooks are the future of React.

Unless you’re dealing with older codebases or special use cases, there’s no reason not to go all-in on functions.

"Classes are vintage. Functions are the future."

Fun Programming