Class-based component VS Functional Component with React

Have you always wondered about the difference between a class-based component and a functional component in React? This recap article is made for you!

Class-Based Component

This is the very first way to create a component, the origin of React.

import React from 'react';

class MyComponent extends React.Component {
    render() {
        return (
            <h1>Hello from my class-based component!</h1>
        );
    }
}

export default MyComponent;

Functional Component

We could also create functional components with React in the past, but we were limited by what we could do. That's no longer the case today; we'll discuss it further in upcoming sessions.

import React from 'react';

function MyComponent() {
    return (
        <h1>Hello from my functional component!</h1>
    );
}

export default MyComponent;

It's also possible to use functional components in the form of an arrow function:

import React from 'react';

const MyComponent = () => {
    return (
        <h1>Hello from my functional component (with the arrow function)!</h1>
    );
};

export default MyComponent;

Which Form to Use?

We will use these three forms, but we will focus on the functional form of a component in the future (whether with the keyword function or the arrow function). Don't worry, we'll go step by step in the rest of the training!