Why React Functional Component(Hooks) were needed

Before Hooks were introduced, it was a compulsion to use the React Class component just for the sake of using states. Later, in 2018, Hooks were introduced in React 16.8 to solve this problem.

Let’s first see the difference between a class & functional component

// Hello World Using Class component

import React from 'react';

class App extends React.Component {
    render() {
        return <h1> Hello World </h1>
    }
}

export default App

// Hello World Using Functional component

import React from 'react';

function App() {
    return <h1> Hello World </h1>
}

export default App

We can already see how short and readable the functional component code is. We can say that code involving a functional component is to the point and concise, while the code witha class component can involve a lot of boilerplate code.

Since, class component involves an extra effort to to even the simple job, they were eventually replaced by React Hooks in 2018.