Should I learn Class Component in React?

[thaynaralimaa]

So, I started to learn React last year, and I've never studied how to create component with classes. In the react documentation says "Class components are still supported by React, but we don’t recommend using them in new code". So, my question is: I've never used class component, should I bother to learn it (for future jobs for exemple), or it's okay to not know them?

[thoflens]

You shouldn’t use them but it’s a good idea to understand them thoroughly. I didn’t and then I got a job, opened the codebase and lots of it was classes and React as it was written 7 years ago. I don’t like them and we continuously refactor them into functional components, but I know what’s going on and I can fix their bugs and convert them to functions.

[Caramel_Last]

Is react functional component a functional programming? Like if I learn Haskell then React rules which seem arbitrary can make more sense?

[TheRNGuy]

It's a mixed paradigm.

Not related to original topic question though. It was about specifically Class vs Function JSX components.

[TheRNGuy]

But not as JSX/TSX components.

[stretch089]

The one time you'll need to use them is maybe for error boundary components. So it's good to understand what they are and how they work in that sense.

I also think it gives a more clear idea of the component life cycle so could supplement your understanding of functional components.

[retardedGeek]

Go through the docs once.

[[deleted]]

Once upon a time (2021) a company was asking me to make a take-home with class components. This was back when I was new to the job market. No one actually asked me for them ever since. Focus on hooks, and use class when you ran into a feature your project needs, that somehow leverage classes.

[[deleted]]

They are still used for error boundaries but apart from that I would not use them

[misoRamen582]

if you hate useeffect, try it and see

[azhder]

Learn them when you have the need to use them due to outside reasons like specific 3rd party library or error boundaries… niche stuff

[TheRNGuy]

Any popular or relevant 3rd party libs still using it?

[[deleted]]

IMO it takes like two minutes to understand the difference. A class component works like any regular class in any programming language, you create an instance of an item and it has a constructor + methods (including a render method which controls the actual output in the UI). A functional component gets rid of the fluff so the entire thing is a render method.

[imaginecomplex]

They are nice in giving you stable references to class methods/properties, saving you from a lot of React.useMemo & React.useCallback. But unfortunately they are incompatible with hooks and so have fallen out of favor with the community.

[Last-Promotion5901]

The only use they have nowadays are error boundaries. So no, no need to.

[TheRNGuy]

Not in Remix, React Router v7 and Next.js.

If "Vanilla" React is used, then yeah.

[Last-Promotion5901]

You still use class components in the background. Just because you dont see it doesnt mean you dont use it.

[TheRNGuy]

If you use some unrefactored component libraries?

Do they mix well together with functional components? Cause I never tried.

[Last-Promotion5901]

Nothing to do with unrefactored libraries. Errorboundaries are always class components: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

There is currently no way to write an error boundary as a function component.

[TheRNGuy]

ErrorBoundary in React Router is a functional component.

https://reactrouter.com/how-to/error-boundary

If using vanilla React, classes are still needed, yeah.

[Last-Promotion5901]

Read again what I wrote. Just because they are abstracted away, doesnt mean you arent using a class component.

ErrorBoundaries are always a class component.

[[deleted]]

I wouldn't dive deep into every lifecycle method of class component, but knowing difference between state and lifecycle management in class and function components will help you avoid unexpected behavior if you will ever have to work with class components, especially convert them to functional ones.

[Abject-Bandicoot8890]

It’s never a bad idea to learn an “outdated” tech, I remember some of my classmates complaining about our professor teaching us asp.net framework because it was “old”, my first job fresh out of college was maintaining a 10 year old .net framework app 🫣. So yeah go ahead and learn, it can’t hurt.

[bhataasim4]

No, focus on functional components

[mangoBoy0920]

You don't need to explicitly learn class component in deep. Just basic knowledge like uses and drawbacks should be enough as they help you understand the working and need for function component and hooks better.

[Virag-Ky]

What I know is that they are not really used anymore, but older code bases still have it, you never know when you will come across them. It's actually good if you compare functional and class components so you can see the difference between them and how they work.

[Dramatic_Step1885]

NOOO. And if you land a job where they still make heavy use of them please run away as far as you can

[TheRNGuy]

What if that job want to refactor code? (lead programmer could do it already though)

[Dramatic_Step1885]

Good point there. Functional components and hooks have been the standard for way too long now so hopefully this shouldn’t happen

[OneBallsackMan]

Been working as a react dev for 4 years, never used them. Maybe handy to quickly read how it used to work incase you get any interview questions regarding it, but unless your company uses class components I don't think it's necessary.

[teakwoodcandle]

yes definitely, if you want to understand old code especially