Understanding Function Components vs Class Components in 100 seconds.
Tags: javascript, react, beginners, webdev
Published: 2024-04-11 06:51:37

## Table of Contents

1. **At the beginning**
2. **What is Functional Components?**
3. **What is Class Components?**
4. **Benefit of using Functional Components**
5. **Conclusion**

## At the beginning
According to React official document, **using functional components is highly recommended rather than class components** right now. React 16.8 introduced "React Hooks" for Functional Components and brought which were previously reserved for Class Components to Functional Components.

#### Functional Components
```React
import React from 'react'

export default function FunctionalComponent() {
  return <div>Hello World!</div>
}
```

#### Class Components
```React
import React, { Component } from 'react'

export default class ClassComponent extends Component {
  render() {
    return <div>Hello World!</div>
  }
}
```

## What is Functional Components?
Functional Components are **JavaScript functions** that take in **props** as an argument and return **JSX（user interfaces）**. They are easier to write and understand, especially for beginners.
In React 16.8, hooks allow functional components to use state and other React features without writing a class.

Here is an example of counter component using Functional Components.
#### Counter Component using Functional Components
```React
import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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


## What is Class Components?
In comparison to functional components, **Class Components are more complex**. Class Components have been the traditional way of creating components, which are defined by using **class of JavaScript**. In React, They return **JSX（user interfaces） by `render()`**. And also, use `state` and `lifecycle` instead of React Hooks in Functional Components.

Here is an example of counter component using Class Components.
#### Counter Component using Class Components
```React
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>
    );
  }
}
```


## Benefit of using Functional Components
There are 4 benefits of Functional Components.

1. **Simple and Readable**
2. **Improving the performance**
3. **Reusable components**
4. **React Hooks**

### Simple and Readable
Functional components are fundamentally simpler and more readable. This simplicity makes it easier for developers to understand the code, leading to faster development and easier maintenance.

### Improving the performance
Functional components can lead to performance improvements in our applications by avoiding the overhead associated with class components such as creating instances.

### Reusable components
Function components promote reusability. They are easier to extract into smaller, reusable components.
This reusability is essential for building scalable applications.

### React Hooks
React Hooks, introduced in React 16.8, have revolutionized the way developers handle state management in function components. With hooks, you can manage component state and lifecycle events without the need for class-based components.

## Conclusion
Now, Most of web applications are created by using Functional Components.
I would say we don't need to learn Class Components too much. Especially for beginners, there are lots of what we should learn in Functional Components including other frameworks based on this concept. So, It's better focus on learning and using Functional Components.