Did "Class Components" die in React?

Asked

Viewed 215 times

5

Before the React update 16.8 it was not possible for functional components to be internal, so Hooks arrived to solve this problem, so the functional components became the standard of React.

Then the Class Compenents are completely "dead" (or almost so)? Or would that still be an exaggerated assumption?

  • is opinion: I believe not, because even the two forms work (class and hooks) and so far I have not seen something contrary to this. It has a lot of legacy too I think that

  • On the issue of legacies it is true, but a person who will start learning React today needs to learn how to use the class components?

  • As much as I am not aware in React, I believe that this issue is about opinions as long as they both work and there is no official documentation on this respect.

  • 1

    Gabriel this question is very pertinent, this is the dilemma, but, the lib does not prevent you from doing in one or the other. I know both because it starts in the class Now whoever starts it’s really complicated, there’s no answer to that.

  • @Cypherpotato there is documentation yes.

  • 1

    I work with React and so far only used class Components, and I’ve created a lot of components, even the simplest ones, although the code is more voluminous (very little), in my opinion, leaves more organized, also, by coming from Angular, I’m more accustomed and prefer the use of classes. About whether or not it’s necessary to learn class Components, It depends on how much you want to specialize in React, for someone who just wants to get to know you don’t need to, but if you intend to continually use lib you certainly do. If someone tells you to update a code with classes will refactor everything?

Show 1 more comment

2 answers

4


TLDR: Classes will not die. (at least not so soon).

As has already been answered here, documentation points out that there are no plans to remove classes from React. However, the documentation contains several other points that can be highlighted here.

Without Breaking changes

From the moment the Hooks were brought without Breaking changes and in an intermediate version (16.8 and not 17, for example), note that it is not a sudden change. As the ad:

Hooks do not replace your knowledge of React concepts. Instead Hooks provide a more direct API to React concepts you already know: objects, state, context, references and cycle of life. As we will show later, Hooks also offers a new powerful way to combine them.

When something has its launch with an approach of complement (or even improve on) rather than an approach of replace, your question should be "What are the advantages of using Hooks if I can still use Classes?" instead of something like "Class components died?". But I will continue the answer by addressing the original question.

Motivations

Among the motivations for the creation of Hooks, a lot of things revolve around the phrase Classes confuse both people and machines:

In addition to making it difficult to re-use and organise the code, we found that classes can be a great barrier to the React learning. You need to understand how this works in Javascript, which is very different from how it works in most languages. You must remember to link (bind) the handlers of events. Without unstable syntax proposals, the code is very verbose. People can understand props, state and the data flow top-down, but still have problems with classes. The distinction between functional components and classes in React and when to use each leads to disagreements, even among experienced React developers.

Note that the speech is something like "you will not 'lose' what you already know, but will apply knowledge in another way" and "we have no plans to remove classes from React". This comes to be similar to the relationship between Android, Java and Kotlin (see that answer for more details).

It is clear that it seems a good idea to start using Hooks, without having to worry in their components classes stop working.

Gradual adoption

Worth strengthening the DRT of documentation:

TLDR: There are no plans to remove classes from React.

There are no plans to remove classes from React. They are not dead, but everything indicates that working with Hooks will become the standard in new versions of React, simply because when you use a technology, the trend is to keep up with it and use the new features it has.

Fundamentally, the Hooks work side by side with the code existing, so that you can adopt them gradually. There’s no hurry to migrate to Hooks. We recommend avoiding any "great rewriting", especially for complex class components existing.

How the community reacted?

When this response was made (April/2020) it was already possible to say that the community was adopting the Hooks and predict that this would be the new "default" - instead of thinking about creating a class component, you create a functional component and add the Hooks as required.

Now (December/2020), a good part of the most used and updated libraries are making use of functional and Hooks, and they really are quite useful - mainly Customizable Hooks. For example, the react-navigation possesses functional components and Hooks own, as well as react-native with useWindowDimensions. There are several other examples, turned into a common practice.

Despite this, there are still class components out there, such as the Contextmenu of lib react-native-popup-menu, but note that this lib does not receive updates as often. If received, they would probably refactor to a functional component.


The above content should answer the question well, but facing the theme Hooks, it is worth leaving as reference also the FAQ and the video presentation of React Conf 2018.

  • 2

    With an answer like this, having only one up is a tremendous injustice! Congratulations

  • 1

    Don’t be so... one more up.

0

In the documentation itself they say they do not intend to remove React classes.

We have no plans to remove classes from React. You can learn more about the gradual adoption strategy for Hooks at the bottom of this page.

The documentation with this excerpt you can read here

Browser other questions tagged

You are not signed in. Login or sign up in order to post.