Functional vs class Components in React?

Functional Component and Class Component

Syntax

A functional component is just a plain javascript function which accepts props as an argument and returns a React element.

function welcome(props){
   return <h1> Hello,{props.name}</h1>;
}

A class component requires you to extend from React.Component and create a render function which returns a React element. This requires more code but will also give you some benefits which you will see later on.

class Welcome extends React.Component{
   render(){
      return <h1>Hello, {this.props.name}</h1>;
   }
}

State

functional component didn’t use state they define the useState using hooks and Hooks came in to picture in React 16.8 then most of the Developers using the functional Component.

In a class Component you define the state in a constructor and use it in render function in any where.

Lifecycle Hooks

In a functional Component you didn’t using Lifecycle Hooks beacause all Lifecycle Hooks came in to React.Component which you extend from in class Components. but Functional Component use the useEffect hooks which is done all the things that is lifecycle hooks do in class Component.

Which one is better?

I think the functional component is better than class Component

• Functional component are much easier to read and test because they are plain JavaScript functions.
• You end up with less code.

Conclusion

Functional Component is better to write than class component beacause it is taking less line of code other than class Component if you have any queries then contact me.

If you find this article helpful then you don’t forget to clap this. Happy Learning