React Functional Components with hooks vs Class Components
With the introduction of hooks in React, the main confusion now is when to use functional components with hooks and class components because with the help of hooks one can get state and partial lifecycle hooks even in functional components. So, I have the following questions
- What is the real advantages of hooks?
- When to use functional components with hooks vs Class components?
For example, functional components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented. Is there anymore reasons?
Thanks in advance.
javascript reactjs react-hooks
edited Oct 30 at 12:53
skyboyer
3,29611128
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
add a comment |
With the introduction of hooks in React, the main confusion now is when to use functional components with hooks and class components because with the help of hooks one can get state and partial lifecycle hooks even in functional components. So, I have the following questions
- What is the real advantages of hooks?
- When to use functional components with hooks vs Class components?
For example, functional components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented. Is there anymore reasons?
Thanks in advance.
javascript reactjs react-hooks
edited Oct 30 at 12:53
skyboyer
3,29611128
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
partial lifecycle hooks where did you get this? I just gave a quick look on the reference link and it does not say about lifecycle methods. As far as my knowledge goes, most people chooses to use class components because they need access to state, not knowing the fact that it will add meta for lifecycle method. With hooks, you should have a functional component that has state minus the overhead of lifecycle method.
– Rajesh
Oct 30 at 11:01
You should check Effect Hook. This is more like componentDidMount and componentWillUnmount.
– Pranesh Ravi
Oct 30 at 11:03
useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API, so you do not have access to any lifecycle method. Its a wrapper that acts like one but you cannot access them individually.
– Rajesh
Oct 30 at 11:14
add a comment |
With the introduction of hooks in React, the main confusion now is when to use functional components with hooks and class components because with the help of hooks one can get state and partial lifecycle hooks even in functional components. So, I have the following questions
- What is the real advantages of hooks?
- When to use functional components with hooks vs Class components?
For example, functional components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented. Is there anymore reasons?
Thanks in advance.
javascript reactjs react-hooks
edited Oct 30 at 12:53
skyboyer
3,29611128
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
With the introduction of hooks in React, the main confusion now is when to use functional components with hooks and class components because with the help of hooks one can get state and partial lifecycle hooks even in functional components. So, I have the following questions
- What is the real advantages of hooks?
- When to use functional components with hooks vs Class components?
For example, functional components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented. Is there anymore reasons?
Thanks in advance.
javascript reactjs react-hooks
javascript reactjs react-hooks
edited Oct 30 at 12:53
skyboyer
3,29611128
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
edited Oct 30 at 12:53
skyboyer
3,29611128
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
edited Oct 30 at 12:53
skyboyer
3,29611128
edited Oct 30 at 12:53
skyboyer
3,29611128
edited Oct 30 at 12:53
skyboyer
3,29611128
3,29611128
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
asked Oct 30 at 10:54
Pranesh Ravi
9,29812347
9,29812347
partial lifecycle hooks where did you get this? I just gave a quick look on the reference link and it does not say about lifecycle methods. As far as my knowledge goes, most people chooses to use class components because they need access to state, not knowing the fact that it will add meta for lifecycle method. With hooks, you should have a functional component that has state minus the overhead of lifecycle method.
– Rajesh
Oct 30 at 11:01
You should check Effect Hook. This is more like componentDidMount and componentWillUnmount.
– Pranesh Ravi
Oct 30 at 11:03
useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API, so you do not have access to any lifecycle method. Its a wrapper that acts like one but you cannot access them individually.
– Rajesh
Oct 30 at 11:14
add a comment |
partial lifecycle hooks where did you get this? I just gave a quick look on the reference link and it does not say about lifecycle methods. As far as my knowledge goes, most people chooses to use class components because they need access to state, not knowing the fact that it will add meta for lifecycle method. With hooks, you should have a functional component that has state minus the overhead of lifecycle method.
– Rajesh
Oct 30 at 11:01
You should check Effect Hook. This is more like componentDidMount and componentWillUnmount.
– Pranesh Ravi
Oct 30 at 11:03
useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API, so you do not have access to any lifecycle method. Its a wrapper that acts like one but you cannot access them individually.
– Rajesh
Oct 30 at 11:14
partial lifecycle hooks where did you get this? I just gave a quick look on the reference link and it does not say about lifecycle methods. As far as my knowledge goes, most people chooses to use class components because they need access to state, not knowing the fact that it will add meta for lifecycle method. With hooks, you should have a functional component that has state minus the overhead of lifecycle method.
– Rajesh
Oct 30 at 11:01
partial lifecycle hooks where did you get this? I just gave a quick look on the reference link and it does not say about lifecycle methods. As far as my knowledge goes, most people chooses to use class components because they need access to state, not knowing the fact that it will add meta for lifecycle method. With hooks, you should have a functional component that has state minus the overhead of lifecycle method.
– Rajesh
Oct 30 at 11:01
You should check Effect Hook. This is more like componentDidMount and componentWillUnmount.
– Pranesh Ravi
Oct 30 at 11:03
You should check Effect Hook. This is more like componentDidMount and componentWillUnmount.
– Pranesh Ravi
Oct 30 at 11:03
useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API, so you do not have access to any lifecycle method. Its a wrapper that acts like one but you cannot access them individually.
– Rajesh
Oct 30 at 11:14
useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API, so you do not have access to any lifecycle method. Its a wrapper that acts like one but you cannot access them individually.
– Rajesh
Oct 30 at 11:14
add a comment |
1 Answer
1
active
oldest
votes
The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.
The docs mention few really good reason to make use of Hooks instead of classes
It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code
Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two
Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.
functional components with hooks can't help in perf as class
components does. They can't skip re-renders as they don't have
shouldComponentUpdate implemented.
Functional component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator
The idea is to be able write the code that you can write using React class component using functional component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.
Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with functional components
However one reason that you should still go for Class components over the functional components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.
Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out its better to use Class
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53062732%2freact-functional-components-with-hooks-vs-class-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.
The docs mention few really good reason to make use of Hooks instead of classes
It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code
Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two
Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.
functional components with hooks can't help in perf as class
components does. They can't skip re-renders as they don't have
shouldComponentUpdate implemented.
Functional component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator
The idea is to be able write the code that you can write using React class component using functional component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.
Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with functional components
However one reason that you should still go for Class components over the functional components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.
Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out its better to use Class
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
add a comment |
The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.
The docs mention few really good reason to make use of Hooks instead of classes
It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code
Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two
Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.
functional components with hooks can't help in perf as class
components does. They can't skip re-renders as they don't have
shouldComponentUpdate implemented.
Functional component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator
The idea is to be able write the code that you can write using React class component using functional component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.
Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with functional components
However one reason that you should still go for Class components over the functional components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.
Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out its better to use Class
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
add a comment |
The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.
The docs mention few really good reason to make use of Hooks instead of classes
It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code
Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two
Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.
functional components with hooks can't help in perf as class
components does. They can't skip re-renders as they don't have
shouldComponentUpdate implemented.
Functional component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator
The idea is to be able write the code that you can write using React class component using functional component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.
Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with functional components
However one reason that you should still go for Class components over the functional components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.
Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out its better to use Class
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.
The docs mention few really good reason to make use of Hooks instead of classes
It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code
Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two
Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.
functional components with hooks can't help in perf as class
components does. They can't skip re-renders as they don't have
shouldComponentUpdate implemented.
Functional component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator
The idea is to be able write the code that you can write using React class component using functional component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.
Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with functional components
However one reason that you should still go for Class components over the functional components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.
Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out its better to use Class
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
edited Oct 31 at 5:50
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
answered Oct 30 at 11:04
Shubham Khatri
78.4k1492127
78.4k1492127
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
add a comment |
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
On that last note, there's some examples of AJAX requests with hooks in this recent question (stackoverflow.com/questions/53059059/…), if anyone is wondering how it can be done
– horyd
Oct 31 at 12:12
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
@horyd, sure we can make use of useEffect to make API calls, but they may get messy. And I in my answer have mentioned the same
– Shubham Khatri
Oct 31 at 12:18
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53062732%2freact-functional-components-with-hooks-vs-class-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
partial lifecycle hooks where did you get this? I just gave a quick look on the reference link and it does not say about lifecycle methods. As far as my knowledge goes, most people chooses to use class components because they need access to state, not knowing the fact that it will add meta for lifecycle method. With hooks, you should have a functional component that has state minus the overhead of lifecycle method.
– Rajesh
Oct 30 at 11:01
You should check Effect Hook. This is more like componentDidMount and componentWillUnmount.
– Pranesh Ravi
Oct 30 at 11:03
useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API, so you do not have access to any lifecycle method. Its a wrapper that acts like one but you cannot access them individually.
– Rajesh
Oct 30 at 11:14