Understanding Function Components vs Class Components in 100 seconds.

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

import React from 'react'

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

Class Components

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

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

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.