This question already has answers here:
When to use ES6 class based React components vs. functional ES6 React components?
(7 answers)
Closed 1 year ago.
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?
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
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
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
Related
I am new to React and learning it. From this link:
There are mainly two components in React:
Functional Components also known as Stateless component
Class Component also known as Stateful component
and it seems that functional components are the rage these days e.g., I inherited some code and it uses functional components everywhere. The same article is then saying:
... a functional component is just a plain JavaScript function, we
cannot use setState() method inside component. That’s why they also
get called functional stateless components. ... useState can be used
to store state in a functional component.
and I do see tons of code using useState in functional components to modify state. Can someone explain this to me?
Answering my own question.
Functional components were referred to as stateless components but its no longer correct to think of them as stateless. This link from official documentation explains it:
You might have previously known these as “stateless components”. We’re
now introducing the ability to use React state from these, so we
prefer the name “function components”.
To answer the second part of the question, functional components are indeed the rage these days because that's the official guidance and recommendation. From this page:
In the longer term, we expect Hooks to be the primary way people write
React components.
Also see this page for some background and comparison of class components vs. functional components.
Is it possible to use both Functional and Class Components in a single React App?. I am building a website UI with React, back end has been build with NodeJS. The templates I am using was build with Class Components where they new Components I am introducing are Functional with Context API's. Can they work together or is it necessary I convert all the Class Components to Functions?.
Yes, you can use both in the same app. They are 100% compatible.
Each one can pass props to the other
They will be both compiled into plain javascript.
Quote from reactjs.org :
In React apps, whether a component is stateful or stateless is
considered an implementation detail of the component that may change
over time. You can use stateless components inside stateful
components, and vice versa.
Another quote from here :
"Crucially, Hooks work side-by-side with existing code so you can
adopt them gradually. There is no rush to migrate to Hooks. We
recommend avoiding any “big rewrites”, especially for existing,
complex class components. It takes a bit of a mindshift to start
“thinking in Hooks”. In our experience, it’s best to practice using
Hooks in new and non-critical components first, and ensure that
everybody on your team feels comfortable with them."
Can we build whole react app using functional component or class based components are compulsory for building stateful components?
You can use functional components to build the whole app too!
With the help of React Hooks, state management has been made possible with functional components too and for any new projects, its a recommended way to go.
Since React 16.8, they've introduced react hooks. So now you can build your whole application with functional components using props based approach and with hooks you can have everything that a class based component provides.
So it's your decision with which you need to go. But if you consider testing with 100% factor then functional components with hooks are the best option to opt.
Hi I'm very new in React. I've started learning React in the past 2 weeks, and I'm currently making a website using the MERN stack with a friend. I've been using class components whenever I saw a need for maintaining states, but I just discovered that hooks can mimic React classes and supposedly reduces code length, increases readability, and creates more maintainable code. So I'm just wondering, should class components be used in React as of 2020 when hooks exist? What use cases do classes cover that aren't covered by functional components?
it's preference thing but the community is moving towards hooks.
Hooks + other features can pretty much cover everything done in hooks
e.g.
useEffect => componentDidMount, componentDidUpdate, componentWillMount
useState => this.setState({})
React.memo => shouldComponentUpdate
some things are easier in classes than they are in hooks at the moment. like the second argument in setState is a callback to ensure that state is changed before executing. this is possible in hooks but it's not quite as clean as that
Hooks are meant as a complete replacement for class components. From react docs,
We intend for Hooks to cover all existing use cases for classes, but we will keep supporting class components for the foreseeable future.
Reading the page linked above about the adoption strategy, the intent behind hooks - would be a great place to understand and form an opinion.
Personally, I love hooks. And haven't used class components since hooks were introduced. I am yet to find a use-case where I needed to use a class component because hooks couldn't satisfy the ask.
This question already has answers here:
When to use ES6 class based React components vs. functional ES6 React components?
(7 answers)
Closed 1 year ago.
Before React16, class components were used over functional components whenever there is a need to use state or lifecycle methods in your component.
In the latest release react introduced Hooks and Effects using which we can use state and lifecycle methods inside our functional components.
So is there any reason why still the class components exists? Is there any cases we still have to choose class components over functional
Here you can see the cases where you will need class components
The most common case where you will need class components is if you want to make an ErrorBoundary, you will need a class component because you can't implement componentDidCatch with hooks... yet!