Function and Class Components in React

In React, components are the building blocks of a user interface. They can be created using functions or classes, each offering unique syntax and features. Understanding both is essential for writing efficient and maintainable React applications.

What Are React Components?

A React Component is a reusable, self-contained piece of UI. It accepts props as input and returns a React element that describes what should appear on the screen.

Key Characteristics of Components:

• Reusable: Build once, use multiple times.
• Compositional: Components can contain other components.
• Declarative: Focus on what to render rather than how to do it.

Function Components

What Are Function Components?

• Function components are JavaScript functions that accept props as arguments and return JSX.
• Introduced first in React, they became more powerful with the introduction of Hooks in React 16.8.

Example: Function Component

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

Characteristics

• Simpler syntax.
• Stateless before Hooks, now supports state and side effects using Hooks.

Functional Component with State (Using Hooks)

import React, { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default Counter;

Class Components

What Are Class Components?

• Class components are ES6 classes that extend React.Component.
• They must define a render() method that returns JSX.
• Used to manage state and lifecycle before functional components gained Hooks.

Example: Class Component

import React, { Component } from "react";
class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
export default Greeting;

Class Component with State

import React, { Component } from "react";
class Counter extends 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>
    );
  }
}
export default Counter;

Get PΛWΛN’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Key Differences Between Function and Class Components

When to Use Which?

Function Components

• Use for all new React code.
• Simpler and more concise.
• Can handle all React features with Hooks.

Class Components

• Use when working with legacy codebases.
• Preferred before React 16.8 for state and lifecycle logic.

Combining Function and Class Components

In larger applications, you may encounter both. It’s common to convert class components into function components gradually, as part of a refactor.

Functional Component with Hooks vs. Class Component

State Management

Function Component (Hooks):

const [state, setState] = useState(initialState);

Class Component:

this.state = { key: value };
this.setState({ key: newValue });

Lifecycle Management

Function Component:

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup logic
  };
}, [dependencies]);

Class Component:

componentDidMount() {
  // Side effect logic
}
componentWillUnmount() {
  // Cleanup logic
}

Examples

Converting a Class Component to a Function Component

Class Component:

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

Function Component:

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