5 August 2020   |   by Jatin Jeena   |   React, Blogs

Class Vs. Functional Components in React

Class Component vs. Functional Component in React





What are components?

A component is a reusable part of the user interface, It can be used anywhere, any number of times in the project.




Functional Component (Stateless Component/ Dumb Component)

It is simple javascript function that return UI i.e. html code.
They are called dumb or stateless component because they are just used to accept data and display them.
Functional components does not have React Lifecycle methods like componentDidMount().
No render() method is used in these components.
Functional methods must be preferred when you do not need to make use of state.
Class Component (Stateful component/ Smart Component)

Class component extends the basic Component class of react.
They are called smart or stateful component because the have the ability to implement logic and state.
React Lifecycle methods like componentDidMount() can be used in Class Components.
Render() method must be used in class components.
They should be preferred when you need to implement logic and state in your component.

Example Code