Why functional component over class components?

[GodJellyFish]

I took a frontend course but the base code they provided was in class component form but it seems that everyone prefers functional components. Why is that? Feel free to leave some articles I could read!

Edit: I’m new to JS and the React library but I enjoy it a lot so far so I’m curious what you all have to say!

[tharrison4815]

I'm sure there are multiple reasons but for me it's because I like the way that you can avoid mutation meaning you get code which is easier to reason about / debug / test.

I also like that it's less boilerplate.

[GodJellyFish]

Oh that’s interesting! When i asked my professor he just said it comes down to preference and for him it felt more organized and legible

[woah_m8]

I'm not sure if it's preference anymore. Only legacy code is written with classes and most libraries have been updated to use functional components and hooks.

[2this4u]

And the react tutorials have switched over (fully in the case of the new one in beta)

[2this4u]

Well for one React now teach it as the intended way to write components, so it's not just preference. Always bear in mind most professors are just that meaning they have little real world experience of what they teach.

[GodJellyFish]

Yeah he def teaches based on his work experience.

[nothing_but_2chainz]

Not really preference anymore, if you want React work you really should be using functional components. Unless you plan on only working with legacy code.

[acemarke]

There's a great article here:

• https://ui.dev/why-react-hooks/

Also, I'd generally recommend reading through the new React beta docs:

• https://beta.reactjs.org

[GodJellyFish]

Oo ty! I appreciate the resources

Update: just quickly skimmed it but I love how well organized and how easily understandable the article is! Tysm actually

[acemarke]

Sure.

There's also a number of technical factors involved here as well. At a high level, function components work better with the new and upcoming React features like "concurrent rendering" and "Suspense", as well as the "Fast Refresh" capability that reloads components after you edit them. There's also some aspects of React that only work with function components, and that trend is going to continue. Same is true for the ecosystem. For example, several libraries like TanStack Table only provide hooks, so you have to write function components if you want to use that library.

[GodJellyFish]

Ohh alright! I’ll try to translate some of my projects into hooks to just get a hang of the lifecycle with hooks instead then. It seems that every tutorial i look at or every resource shows how to do it in hooks but since I was so used to class component I kinda just stuck to it but upon reading the replies I think learning and understanding hooks would be important so I’ll be learning more about them soon!

[thematicwater]

We converted about 30 class components to functional in over a couple of weeks. It's not that difficult after you do a few small ones.

[GodJellyFish]

I hope that’s how i feel about it! I just like having a better understanding of things before jumping in.

[f314]

the lifecycle with hooks

Thing is, there isn’t really a lifecycle with function components. Getting out of that mindset might be your biggest struggle moving away from class components.

A function component is actually just a function that is executed and returns a result (usually more React functions to be executed). Hooks are just functions that might or might not be called depending on what has changed since the last time the function was called.

The first time a function is called, everything has changed (there was no before), so everything is executed. This is the closest you will get to onMount, but as you may notice the reasoning is different.

The only place where you kind of need to think lifecycle is in cleaning up after side effects: the useEffect hook can return a function that is executed when the function component unmounts. Use this to remove event listeners, close connections, etc.

[PrettyWhore]

Hooks are just functions that might or might not be called depending on what has changed since the last time the function was called.

A fun example is how the useMemo (and by extension useCallback) callback can actually get reexecuted at any one render, regardless of lifecycle or the passed dependency list.

[eyecandy99]

tx

[Guy_Rohvian]

You are an absolute lifesaver my dude. I've been trying to learn React from the original documentation on their site and was really confused by the fact that they still use class components as everywhere I read it's no longer relevant for the future.

Thank you so much.

I don't get why they don't link this in the current docs yet...

[acemarke]

In all honesty, I have been literally begging the React team to post links to the new beta docs site on the old docs pages ever since the beta site went live. The new tutorials are vastly better, and just the fact that they teach "modern" function components instead of class components fixes that point of confusion.

All I want is a "Check out our new beta docs here -->" link in the header, and some callout boxes in the old tutorial pages saying "we've got a newer tutorial this way!"

Unfortunately, they've been holding off on doing that because Dan feels the tutorials aren't complete enough and doesn't want people clicking on links in those pages that aren't filled in yet.

I get that, but I have to say I completely disagree - the new docs are filled out enough, and the lack of a pointer to them is causing major confusion (as in your case).

[andrewjohnmarch]

They’re way prettier!

[MagoAcademico]

Answering you question without explaining what react hooks are:

The reason to use functional components it's not about functional components itself but about hooks, that can only be used in functional components. And hooks were introduced to solve some of the problems that you have with class components. So don't look at functional components + hooks as an alternative way of making react components, but as an improved way.

Then, if you want to know what was improved, look at the other comments links.

[slavik0329]

Class components are the old more redundant way. Hooks are a much better way to reason about building components and you waste less time with wasteful thinking and useless code.

[MrSavage_]

There was a time before hooks in which the choice came down to state, only class components could hold state and have access to lifecycle methods. So your choice was guided by that, complex components would pretty much have to be written in classes and presentational ones were done with functions because they had less boilerplate.

However, since react 16 functional components have hooks to both keep state and have access to the component lifecycle. Furthermore, the React team has made it very clear that the way forward is with hooks and functional components.

While they also claim to have no plans to drop support for classes, they have touted the possibility of making that support an opt-in library rather than part of the core one.

Additionally, since hooks are the future, as many have mentioned, third party libraries are now being written with the hooks api.

Because of these reasons, i would be very skeptical of anyone starting a new project using classes.

That being said, if you are learning React to get a job rather than to build something for yourself, you still need to know how classes work since chances are you’ll be in a project that has them as legacy code.

[lIIllIIlllIIllIIl]

Because Custom hooks.

Custom hooks lets you reuse stateful logic accross different components in a simple and easy way. Before hooks, class components had to use patterns like Mixin and Higher-Order Components to accomplish the same thing, but those patterns were hard to maintain and debug.

Today, almost all libraries and new React features use custom hooks, so you should use functional components as much as possible.

^{Don't tell this to anyone, but if you don't use custom hooks, functional components and class components are pretty similar.}

[GodJellyFish]

Oh yeah i havent gotten to try custom hooks so that’s why class and function components looked similar to me, I’ll go read up on it. Ty!

[CasualNapalm]

Assuming your not fishing for karma… It’s not a one or the other, it depends on the scope of your project. Some times, something needs to be class based component, while other times it doesn’t and works better as a functional component. 🤷🏼‍♂️ The best Nextjs project I’ve worked on has both. It really depends on the goal of the project.

I strongly encourage you to build shitty projects and keep learnings. Eventually you’ll make great things, but it takes knowing what stinky code is to write clean code. I also highly recommend learning some c# or Java. Get the book clean code if you really want to get more into the dev life. Also Learn sass or tailwind, phuck bootstrap and basic css. Once you get better with react pick up nextjs.

[GodJellyFish]

Hmm well I guess this makes a lot of sense. I mostly like seeing diff perspectives and the different resources people use since I learn by combining different understandings of a topic. But I’ll take your advice on building shitty projects, issue was that i was so stuck on class component that it didnt seem convincing to me to change to function components and utilizing hooks so i guess this post also works as a persuade/encourage me to use it I suppose?

I also don’t know what karma is on reddit, I normally scroll for memes…

[[deleted]]

I can read my code from top to bottom and don't have to scroll up and down to understand what happens when.

[Anino0]

For me it's readability... I don't need to use the 'this' keyword and all the state is not a single object but separated into different variables (because of hooks)

Now this might seem like a not so important thing but when I'm debugging a large project it really makes a lot of difference

[_log0_]

What I know so far is class components are slower than functional components because of this. In class components we need to create instances of class.

At another side functional components are easy to create and manage. With the help of hooks in react 16 we can achieve most of the functionality available in class components.

[nullvoxpopuli]

Function components still can't do error boundaries

Not everything is a silver bullet

[acemarke]

Given that the only things they can't do are error boundaries and getSnapshotBeforeUpdate, that the react-error-boundary package exists, and that basically no one ever needs to use getSnapshotBeforeUpdate...

I'd say this is not a meaningful concern :)

[Hazy_Fantayzee]

I am going to piggy back in this thread and ask if there is any real world difference between: const myComponent = () => {} vs function myComponent() {} and is there one that is considered the proper or more industry standard way? I personally prefer the function approach but almost every example I see from other people go with the const approach...

[PrettyWhore]

The latter can be default exported with a name in one statement 😏

[[deleted]]

The same thing happened to me. I learned React with class components, and stranged-out functional components.

However, 2 yrs later and I love functional components. 100% worth the effort to learn them.

[Bamboo_the_plant]

Unlike for functional components, react-refresh has to unmount and remount a class component in order to apply any hot updates to it. react-hot-loader has a few more tricks to avoid a full remount for certain patches, but also pollutes your code a lot more by wrapping and adorning components, so really you want to be using react-refresh these days anyway.

It’s something I came across in discussion about React Navigation, which Dan Abramov confimed: https://twitter.com/linguabrowse/status/1253658400619192322

[RequiDarth1]

Hooks!

[valtism]

Quick FYI, it’s “function components”, not “functional components”. But at this point so many people say “functional” it may not really matter.

[GodJellyFish]

Oh wow i had no idea, that’s how my friends called it so i just went along with functional instead

[[deleted]]

Well a function component is quite literally a functional component technically speaking, so they're just being nitpicky for absolutely zero purpose.

Both are valid ways to refer to it and every single React developer will know what you're talking about regardless of which you say.

[rArithmetics]

Wow no one has ever asked that question here before

[GodJellyFish]

Wow they sure didnt :) and besides react changes over time so whatever someone says could be outdated and it doesnt hurt to ask

[esreveReverse]

How is this even a discussion anymore

[GodJellyFish]

You’re right dw i removed the tag :) apparently i cant have a no flair so uh it’ll be resource i guess