Class Components vs Functional Components in React

In this article I'm going to show you the differences between class components and functional components in react and which one you should choose.

There are mainly two components in React:

• Functional Components
• Class Components

First I will give you an idea about what is component.

What is component?

Component is a base building block of any react application.It is a JavaScript class or maybe a function which accepts inputs(properties-Props) and return React elements that shows how the User Interface need to be visible.

So if we describe a component in a react by using a JavaScript function Its like this.

When its comes to ES6 class you can use following syntax to write components.

After referring this you will realized that same output is returned and which should I use?

Functional Components

• Functional Components are basic JavaScript functions.
• Typically arrow functions but also can be created with regular function keyword.
• Referred "dumb" or "stateless" components because its accepts data inputs and simply showing them in some form.
• Mainly responsible for rendering UI's.
• There is no render method used in a functional component.
• React life cycle methods(componentDidMount) cannot be used in functional components.
• Do not need to use react state.

Class Components

• Make use of ES6 class and extend the Component class in react.
• Its tend to implement logic and state because of that its called "smart" or “stateful”component.
• React life cycle methods can be used within the class component.
• Can pass props and can be access props by using this.props.

Differences between functional and class Components

Syntax: The most obvious difference is the syntax.Functional component is just a plain JavaScript function which will accepts properties and arguments and return elements.

When it comes to class components its required to extend from React.Component and render function returns React element.

State:Functional component is created by plain JavaScript you cannot use setState() in your component. Because of that its called stateless component.That means functional component doesn't have its own state.

Note:With the React 16.8 Hooks update now you can use useState in your functional components.

Life-cycle Hooks:Cannot use life-cycle hooks in functional components.But with React 16.8 Hooks update you can use useEffect hook to use life-cycle events.

Why should you use functional components?

There are some benefits you get by using functional components in React.

• Functional components are easier to read and its testable(because these are plain JavaScript functions).
• It's easy to separate container and presentational components.
• Can easily use best practices.
• Can help to increase application performance.

This is the basic idea about Functional Components and Class Components.So when it comes to real world applications we need to think about application performances so try to use functional components not stick with class components :D

Hope this article was helpful :)