DEV Community

Why Functions Are Better Than Classes in React.js

Sidra Maqbool on October 30, 2023

In the ever-evolving world of web development, React.js has emerged as a powerful and popular library for building user interfaces. While React all...
Collapse
 
eerk profile image
eerk • Edited

Not sure if the argument "the function component requires fewer lines of code, making it more readable and less error-prone" is actually true.

Just look at stackoverflow, dev.to, and youtube to find tons of questions and contradicting explanations of the useEffect hook. When to use it, where to place it, do you need useMemo or useCallback, "You are using useEffect wrong", etc. etc. etc.

Collapse
 
brense profile image
Rense Bakker

In all fairness, that's actually the fault of class components and not hooks 😜 people got confused because someone somewhere tried to apply class components lifecycle method logic to the useEffect hook and it all went downhill from there. The confusion about useMemo mostly stems from people who have not realized the difference between passing props by reference or by value and not realizing how many bugs you can introduce if you pass a prop by value 😛 I was hoping that misconception would die quickly, after people started realizing how bug prone their React code got when they did it wrong, but what they did instead was blame it on the useEffect hook because that's where the symptoms of bad state management would start to show 😛

Collapse
 
eerk profile image
eerk

"I was hoping that misconception would die quickly" - the same has been said bout usage of the "this" keyword in a class. People just find it confusing because it is not intuitive.

Thread Thread
 
cg_theone profile image
cg_theone

No, people find it confusing because they're amateurs and juniors, because nowadays everybody and their dog is a web developer.

Collapse
 
dsaga profile image
Dusan Petkovic

One things I can say for sure is that they are less error prone, as "this" is not used in functional components, and its easier to test (as long as you know how to mock a custom hook - its a bit tricky but not too hard)

Collapse
 
pengeszikra profile image
Peter Vivo

Even shorter, mark: it is really simple pure function, even don't have props.

const MyComponent = () => <div>Hello, World!</div>;
Enter fullscreen mode Exit fullscreen mode

Here is the better one which do some works.

const Title = ({title, ...rest}) => <h1 {...rest}>{title}</h1>;
Enter fullscreen mode Exit fullscreen mode

When we start using childrens, hooks, our functional compontents start more and more complicated. Hooks just a kind of replacer of class innerstate capability.
But even the real complex one is looks like:

const Complex = (props) => {
  const stateAndActions = useSomeHook(props);
  switch (innerState.case) {
     case CASE.ALPHA: return <Alpha {...stateAndActions} />
     case CASE.BETA: return <Beta {...stateAndActions} />
     // ... so on 
     default: return <Default {...stateAndActions} />
  }
}
Enter fullscreen mode Exit fullscreen mode

Or using some Context to avoide prop drilling.

Collapse
 
georgewl profile image
George WL

And of course, custom hooks, to encapsulate reusable logic

Collapse
 
ncpa0cpl profile image
ncpa0cpl

I find it hard to believe that functional components have better performance than class components. Everything I know about JavaScript would suggest otherwise.

A class component doesn't redeclare new functions, dependency arrays and other garbage on every render cycle. Allocating new memory for those things is not free, and increases the amount of time the Garbage collector will have to spend cleaning all that up. useCallback is also not necessary in class components, so react doesn't need to diff the dependencies every single time. Also diffing props manually in one of the lifecycle callbacks is going to be faster than doing so dynamically via dependency arrays since you don't have to iterate over it.

The claims in the article about hooks enabling react to "manage state and side effects efficiently" doesn't make much sense to me either. How exactly is it more efficient? Sounds like a bunch of bs.

Collapse
 
nevcos profile image
Filipe Costa

Great answer 👌 I think exactly the same.

Collapse
 
dsaga profile image
Dusan Petkovic

I wonder why exactly do functional components offer better performance than functional?

I believe they probably do, but I wonder if its just a consequence of developing in a functional way or something under the hood is more performant in hooks vs legacy, and what exactly?

Collapse
 
oculus42 profile image
Samuel Rouse

A pure functional component is guaranteed to produce a consistent output for a given input and has no internal representation of state that needs to be consulted or maintained. React does not spend time creating, storing, and tearing down instance when using pure functional components, it just passes them information and gets back something to put into the DOM.

I don't have actual numbers on this, but I expect the performance benefit is much smaller with hooks. Hooks removed much of the complexity of dealing with classes but it hides the instantiation and logic to "align" the hook state from each render – which is why you can't have conditional hooks

Collapse
 
dsaga profile image
Dusan Petkovic

Do you mean that there are not much performance benefits when using hooks?

"but I expect the performance benefit is much smaller with hooks. "

Also, technically its rare to have PURE components in react, or maybe some are PURE, but they can also have state with hooks or effects, maybe its less logic that react needs to do behind the scenes for class components and for functional just more re-renders are triggered...

Collapse
 
rajaerobinson profile image
Rajae Robinson

Great article!

Functional components and hooks have certainly simplified React development. No wonder they are now the standard. I wrote a helpful article explaining the concept of hooks in React.

Collapse
 
codewithmhd profile image
Codewith-Mhd

const helloWorld =()=>{
return (" hello world");
}

Collapse
 
georgewl profile image
George WL

Even bigger reason: React 17+ it's designed to be functional first.

Plain and simple

Collapse
 
antonkobelev profile image
AntonKobelev

👍 thanks!:)

Collapse
 
codewithmhd profile image
Codewith-Mhd

it's a better choice to use functional components

Collapse
 
johannesvollmer profile image
Johannes Vollmer

Nice article. I wonder what happens if I add arguments to my function component, will that be like props of the class component?

Collapse
 
matkwa profile image
Mat Kwa

Right, that's how you pass the props to your functional component.

react.dev/learn/passing-props-to-a...

Collapse
 
learncodeprofessor profile image
LearnCodeProfessor

I like it.