Why React Functional Components are the future?

import React from "react"; 

class App extends React.Component {
  render() {
    return <h1>I am Class Component</h1>;
  }
}
export default App;

import React from "react";

function App() {
    return <h1>I am a Functional Component</h1>;
}
export default App;
```



To create a functional component you have to declare a function just as you do it in JavaScript.

The above snippet is an example of a functional component, it’s the written version of the class component we saw above. You can also use the ES6 Arrow functions to create a component.



```javascript
import React from "react";

const App = () => {
    return (
       <h1>
          I am a Functional Component created with ES6 arrow function       
       </h1>
)}

export default App;
```



You can compare both types of components and can see for yourself that functional components have simpler and cleaner syntax.

But syntax isn’t always enough to jump into certain technologies, you also need a strong set of features and capabilities to build complex apps, all of which functional components lacked initially.

So in theory, developers can use class components or functional components, whatever they prefer. But in reality, only class components were capable enough to build complex features and apps leaving developers no choice apart from them.

## The Rise of Functional Components

Everything changed after React Conf 2018 where “Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them.” (from [React Docs](https://reactjs.org/docs/hooks-intro.html#video-introduction))




The motivation behind the introduction of Hooks in functional components was to solve the problems “encountered over five years of writing and maintaining tens of thousands of components. ” (from [React Docs](https://reactjs.org/docs/hooks-intro.html#motivation))

> With hooks we separate code not based on the lifecycle method name but based on what the code is doing” - Dan Abramov

The reason why hooks got so much attention was because it brought the power of state and lifecycle methods into functional components. You now have useState hook to tackle the setState method and useEffect was capable enough to replace many lifecycle methods. No more dependency on class components.


![React functional components vs class components](https://cdn.hashnode.com/res/hashnode/image/upload/v1644844049013/ApaYG3yin.jpeg)

> If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
> 
> [React Docs](https://reactjs.org/docs/hooks-effect.html)

There are a total of 10 built-in hooks which were shipped in version 16.8. -

- useState

- useEffect

- useContext

- useReducer

- useCallback

- useMemo

- useRef

- useImperativeHandle

- useLayoutEffect

- useDebugValue

Not all of these hooks are frequently used, most of the time we need only useState and useEffect. However, if these 10 hooks are not enough for you, React also gives you the option to build your own [custom hook](https://reactjs.org/docs/hooks-custom.html).

## The Future of Class Components

We already discussed how the importance of class components diminished after hooks came into being. However, class components are not going away, at least not anytime soon. The React team themselves has mentioned that there are no current plans to remove class components from React.

There are a great number of legacy projects which still use class components but React’s team recommends using functional components for all newer projects. All the modern React tutorials also focus only on functional components. Furthermore, the introduction of new beta documentation by the React team also confirms their future vision of Hooks playing a major role in the development of future React applications.

## Conclusion

This article was a historical analysis of React. It also looks at how the Functional Component beat Class Component to become the key player in the development of React applications, despite being introduced as a low power building component that can render more or less only static applications sprinkled with some props.

If you like this article, share it on your social accounts. Check out my [blog](https://fullstackstage.com/) and follow me on [Twitter](https://twitter.com/ashutoshmishrae) if you don’t want to miss more articles just like this one.