Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React - Preference: function component vs class component [duplicate]

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?

like image 878
Douglas Moreira Avatar asked May 17 '20 22:05

Douglas Moreira


People also ask

Which is better function component or class component in React?

Nothing is better, because both have pros and cons. But class components are important to understand React flow and lifecycle methods. The new learner should practice React using class components. Once they are familiar with class components, they can learn and use functional components.

Are React functional components faster than class components?

There is an opinion that functional components show a greater performance compared to class components. The point is that the React functional element is a simple object with 2 properties: type(string) and props(object). To render such a component React needs to call the function and pass props – that is all.

When would you use a class component over a functional component?

Class components need to extend the component from “React. Component” and create a render function that returns the required element. Functional components are like normal functions which take “props” as the argument and return the required element. They are also known as stateful components.

What is the difference between functional component and class component in react?

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function that returns a React element.

How to render a class component in ReactJS?

A class component requires you to extend from React. Component and create a render function which returns a React element. There is no render method used in functional components. Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.

What are the components of react?

Functional Components: Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.

What is the difference between props and class components in react?

They both do exactly the same thing. Both components take a prop (name) and render `Hello, {name} `. It's an extremely simple example but already we can see some of the differences. The class component needs to extend the React Component class, and must specify a render method.


3 Answers

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

like image 173
Maycon Mesquita Avatar answered Oct 26 '22 04:10

Maycon Mesquita


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

like image 24
Khabir Avatar answered Oct 26 '22 02:10

Khabir


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

like image 31
t_dom93 Avatar answered Oct 26 '22 02:10

t_dom93