DEV Community

Cover image for When to use Class Component and Function Component??
Phani Murari
Phani Murari

Posted on • Updated on

When to use Class Component and Function Component??

Hello Everyone,

In this post let's understand where to use the Class Component and Functional Component in react

Before diving, Let's start understanding what is a component in react?

Component

Websites or Web Applications developed using react is the combination and interlinking of different Components.

Components let you develop the UI of the website independently and even we can use reusable components to implement a similar UI.

React facilitates the developer with Class Component and Functional Components

Class Components

Class Components are built using ES6 Class

class Welcome extends React.Component {
  render() {
    return <h1>Super Excited to post my first post in Dev Community</h1>;
  }
}
Enter fullscreen mode Exit fullscreen mode

Functional Component

The simplest way to write the Component in react is to write a JavaScript function

function welcome(props) {

 return <h1>Super Excited to post my first post in Dev Community</h1>;

}
Enter fullscreen mode Exit fullscreen mode

We can use the Arrow Functions as well for the functional Components

const welcome = (props) => <h1>Super Excited to post my first post in Dev Community</h1>;
Enter fullscreen mode Exit fullscreen mode

Hope we had a short and good recap about the Class and Functional Components

The above two components which are written in class and Functional Components are equivalent from React’s point of view.

Now the major question rises in your developer's mind!

When to use the Class Component and the Functional Component??

To answer this question we need to have a decent understanding of the state of the component.

To recall or revise the concept of the state of the component, I suggest you refer to this.

In class components, the render method will be called, whenever the state of the components changes. On the other hand, the Functional components render the UI based on the props.

Whenever we have the use case with the State of the component and rendering the UI based on the Component State, use the Class Components

Class Components should be preferred whenever we have the requirement with the state of the component.

In the beginner stage of the developer journey, we should be familiar with the Class Components and the Functional Components, As we progress towards the Advanced stage of our developer journey, We are able to understand much more cool stuff provided by React like Hooks

In React version > 16.8, React even facilitates developers with Hooks to use the state and other React features even without writing the Class Component

To know more about Hooks, Refer to this

I love to appreciate your enthusiasm to learn more.

Thanks for Reading!

I'm Phani Murari

Instagram
LinkedIn

CodeIsPeace

Top comments (17)

Collapse
 
kishansheth profile image
Kishan Sheth

Your Article was great. But after the React version 16.8 we can use state in Functional Components also, so there is no need to use the class components. In version 16.8 Hooks were introduced and with the use of useState hook we can use the state in functional components also. It is advised that you use Functional components rather than class components by Facebook itself.

Read more about hooks from official documentation.
reactjs.org/docs/hooks-intro.html

Follow my YouTube Channel for amazing Web Development Tutorials.
youtube.com/channel/UCDT8sIFy3pW8L...

Collapse
 
piyushmbm45 profile image
Piyush Jain

Its the heading of React website.

Collapse
 
fpeluso profile image
Fabio Peluso

The answer is simple, always use function components

Collapse
 
lostcarpark profile image
James Shields

One small correction, it's Function components, not Functional components. You can potentially use functional programming techniques in either class or function components, but nothing in Javascript forces you to.

One thing that's troubling me. I keep seeing sources saying you should switch to function components, but very few reasons given for why it's better.

Collapse
 
tsolan profile image
Eugene

Easier to write, no 'this' messing, less lines, cleaner and much more readeble code.
I think, it's enough.

Collapse
 
ozzythegiant profile image
Oziel Perez

But harder to read, leads to messier components, and most devs end up with giant function component files. All these hooks are just an excuse to not understand how this works. State is going to be commited to memory no matter what, so I see no reason to use function components when should have just continued using class components.

Thread Thread
 
tsolan profile image
Eugene

Is it a joke or you have never really seen both of them? About hooks… it made me laugh. Feelings like someone came from Java and trying to use oop everywhere else without understanding the reasons.

Thread Thread
 
ozzythegiant profile image
Oziel Perez

I use React on a regular basis and have used it since v15. Hooks we're adopted by everyone because they can't do OOP for squat. Hooks have been a disservice to web development and have littered code bases with spaghetti code. I see no benefit to hooks other than being a fake class. Should have just stuck with classes. Nice assumption that you think I come from Java. I hate the Java ecosystem because they over engineer all their OOP code. My stance is that so many devs can't organize their code at all, and hooks just exacerbated the problem.

Thread Thread
 
tsolan profile image
Eugene • Edited

It doesn’t really matter what is going on behind the scenes and how much code hooks require for their realisation. Since there are no native classes in js but syntactic sugar over functions, it’s strange to hear about spaghetti code. The only purpose of libraries/frameworks such as React - to abstract away many sophisticated details and simplify development, not vice versa, and function components are just the next step to improve that.

Thread Thread
 
ozzythegiant profile image
Oziel Perez

Disagreed. So many devs write messy code with functions. They don't understand that there needs to be separation of concerns and that functions need to be small. Plus, class components have superior readability because of the strict OOP conventions. The best functions are pure, easily tested, but because of UI being rendered as a function, side-effects make the function unpure.

Collapse
 
dylanesque profile image
Michael Caveney

The only reason to use Class Components with modern React I can think of is if you need to use Error Boundaries since there isn't a function version of these.....yet.

reactjs.org/docs/error-boundaries....

Collapse
 
dileepmeghwal profile image
Dileep Kumar Meghwal

Thanks a lot brother! for the clearance about when to uses.

Collapse
 
phanimurari profile image
Phani Murari

Thanks Dileep, hope this helpfull for you.

Collapse
 
dev_emmy profile image
nshimiye_emmy

nice explanation

Collapse
 
phanimurari profile image
Phani Murari

Thanks :)

Collapse
 
johnfrommartin profile image
Info Comment hidden by post author - thread only accessible via permalink
johnfrommartin

Unless you’re stuck in React <16.8, this is outdated information.

As Kishan mentioned, Functional Components now have state via Hooks. React recommends that Functional Components are used over classes, and even will throw warnings about a few Class Component lifecycle methods that are being deprecated.

Collapse
 
amansaxena001 profile image
Amansaxena001

The answer is shift to vue

Some comments have been hidden by the post's author - find out more