10

Are class components being abandoned?

I see that in several libraries examples have function components as a priority.

Especially React Navigation.

Likewise, React itself with Hooks only makes them available for function components.

The main question is: Why are function components being so prioritized?

Douglas Moreira
  • 130
  • 1
  • 2
  • 10

3 Answers3

21

No, i think Class Components won't be abandoned today. Maybe in future.

They aren't lightweight as Functional Components can be, but i see a lot projects on community using Class Components.

However, here we have some reasons why the community is supporting the Functional Components approach:

  • Class Components requires more code but will also give you some benefits which you will see later on (the transpiled code by Babel will be larger too)
  • A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
  • Functional component are much easier to read and test because they are plain JavaScript functions (less code).
  • The React team mentioned that there may be a performance boost for functional component in future React version

See this answer: https://stackoverflow.com/a/49613435/4119452

More info: https://www.twilio.com/blog/react-choose-functional-components

Maycon Mesquita
  • 4,470
  • 2
  • 21
  • 29
  • 3
    Minus 1 for putting a medium link which requires having Medium account to get info. – me_digvijay Feb 24 '21 at 12:37
  • 5
    @me_digvijay I just removed the link from the medium and put a great article from another source. Thanks for noticing! – Maycon Mesquita Mar 15 '21 at 18:13
  • 3
    Thanks, let me retract myself – me_digvijay Mar 18 '21 at 16:13
  • 2
    No, functional components are not easier to read. At least developers who are get used to OOP, like Angular devs. And there is no performance boost at all. Currently the difference between class and functional components is in the taste of a specific developer. – flm Apr 07 '22 at 11:35
2

now a days, class components and functional components are almost same. In functional component Hooks were not introduced before and to make equivalent of class component, functional component gets new hooks like useState, useRef, useMemo which are equivalent to this.state, React.createRef and PureComponent.

Moreover, componentDidUpdate on class component can be used useEffect on functional component.

More details please check Functional Components vs Class Components in React and React JS — Understanding Functional & Class Components

Khabir
  • 5,370
  • 1
  • 21
  • 33
1

Hooks-first approach [Update 2020]

React team is currently re-building docs with Hooks-first approach which should be a preference for all new features and apps:

In future, is there any chance that Class Components becoming deprecated?

Class components are going to be around for years to come—for example, there are tens of thousands in production at Facebook already. However, we do recommend that new apps be built with function components and Hooks, which is why we want those docs front and center.

https://github.com/reactjs/reactjs.org/issues/3308

t_dom93
  • 10,226
  • 1
  • 52
  • 38