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...

Read full post

Peter Vivo • Oct 30 '23

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

const MyComponent = () => <div>Hello, World!</div>;

Here is the better one which do some works.

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

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} />
  }
}

Or using some Context to avoide prop drilling.

George WL • Oct 31 '23

And of course, custom hooks, to encapsulate reusable logic

eerk • Oct 30 '23 • 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.

Rense Bakker • Oct 31 '23

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 😛

eerk • Nov 1 '23

"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.

Dusan Petkovic • Oct 31 '23

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)

ncpa0cpl • Oct 31 '23

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.

Filipe Costa • Nov 1 '23

Great answer 👌 I think exactly the same.

Dusan Petkovic • Oct 30 '23

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?

Samuel Rouse • Oct 30 '23

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

Dusan Petkovic • Oct 31 '23

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...

Rajae Robinson • Nov 6 '23

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.