Use functional components and hooks whenever possible

Introduction

In React, a component is a piece of code that represents a part of a user interface. Components can be either functional or class-based.

But why should we use functional component over class-based component ?

Functional components are a simpler and more efficient way to define components in React compared to class-based components. Here are a few reasons why you might want to use functional components over class-based components:

Simplicity :

Functional components are generally simpler to write and understand than class-based components. They don't have the overhead of a class structure, and they don't have to deal with the state or lifecycle methods that class-based components have. This can make functional components easier to reason about and debug.

Performance :

In some cases, functional components may also be more performant than class-based components. This is because functional components are just pure functions that return JSX, whereas class-based components are more complex and may involve additional overhead.

Code Size :

Since functional components are generally simpler and more concise than class-based components, they can result in smaller codebases. This can make it easier to maintain and understand the code, especially as the codebase grows.

Hooks :

Hooks are a way to add state and lifecycle methods to functional components, making it possible to use these features without writing a class. This can make functional components even more powerful and flexible.

Code Snippet comparision

Here is the comparison code snippets of class-based component vs functional component of counter app.

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

  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }))
  }

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

Here is the equivalent functional component using React Hooks:

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

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  )
}

However, there may be cases where you need the additional features provided by class-based components, such as access to the this keyword or the ability to use lifecycle methods. In these cases, it is still appropriate to use class-based components.