When to Use Functions vs. Classes in React.js?

In React, one of the key decisions you'll face when creating components is choosing between functional components and class components. Both types have their advantages and disadvantages, and the right choice depends on project requirements, team preferences, and your coding style. In this article, we’ll discuss when to use functions versus classes in React, with five examples of code illustrating the differences.

Functional Components vs. Class Components – Key Differences

• Functional Components are simple JavaScript functions that return JSX. They’re often more intuitive, easier to test, and are ideal for components that don’t need to manage significant internal state.
• Class Components are more complex as they contain state management logic and lifecycle methods. Use classes primarily when you need access to advanced React features like internal state management or response to lifecycle events.

Examples of Situations When to Use Functions vs. Classes in React

1. Simple Data-Rendering Component – Perfect for a functional component.
2. Component with Internal State – Example of when a class might be more applicable.
3. Using Hooks – To handle state and effects directly in functional components.
4. Lifecycle Methods – Classes offer a better solution when you need fine control over mounting and unmounting.
5. Scalability and Readability – Summarizing the benefits of each approach.

Example 1: Simple Data-Rendering Component

A functional component is the best choice when dealing with a component that only renders data passed as props.

Function:

// Functional component
const Welcome = ({ name }) => <h1>Welcome, {name}!</h1>;

Class:

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

Here, the function is shorter and more readable. The component has no internal state, so a class is unnecessary.

Example 2: Component with Internal State

Class components are helpful when managing state was primarily done in classes, especially before Hooks became available. Nowadays, you can manage state in both types, but here's a class-based example.

Function with Hook:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Class:

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Using functional components with Hooks is often preferred now, but classes are still useful for more complex components.

Example 3: Using Hooks

Hooks like useEffect and useContext make functional components capable of managing state and lifecycle behavior. Here’s an example using useEffect to fetch data after component mount.

Function:

import { useEffect, useState } from 'react';

const UserProfile = ({ userId }) => {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    fetch(`/api/user/${userId}`)
      .then(response => response.json())
      .then(data => setProfile(data));
  }, [userId]);

  if (!profile) return <p>Loading...</p>;

  return <div>{profile.name}</div>;
};

Example 4: Components with Lifecycle Methods

When you need complex lifecycle management, class components can offer more control.

Class:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ time: new Date() });
  }

  render() {
    return <p>The time is {this.state.time.toLocaleTimeString()}</p>;
  }
}

Example 5: Scalability and Readability

Scalability is essential for larger projects. Over time, classes can offer a more structured way to control code. However, Hooks allow for similar control without creating complex structures.

Function:

import { useState, useEffect } from 'react';

const DataFetcher = ({ url }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data ? <div>{data.content}</div> : <p>Loading...</p>;
};

Summary

• Use functional components with Hooks for simple components or modern projects, as Hooks like useState, useEffect, and useContext fulfill lifecycle and state management needs.
• Use class components when you have complex lifecycle logic or are working on legacy projects with existing class components.

The decision of which component type to choose depends on project requirements and specific needs of your code. In practice, functional components with Hooks are now more common for their simplicity and flexibility, while class components remain useful for managing complex logic in legacy applications.