Add State with the useState Hook to a React Function Component

Elijah Manor
InstructorElijah Manor

Share this video with your friends

Send Tweet

Historically, you had to use a React Class Component in order to maintain state in a component. However, with Hooks, you can now add state to a Function Component using the useState hook. In this lesson, we will explain how to use this API and then convert a portion of an existing Class Component to a Function Component.

Adam
Adam
~ 2 years ago

Is there a missing video? How did it go from Environment Setup to this? Even the CodeSandbox doesn't match (it actually doesn't even work).

Fergus Meiklejohn
Fergus Meiklejohn
~ 2 years ago

It might not be working because the versions of React and ReactDOM aren't correct in the CodeSandbox. Now they need to be ^16.8.0-alpha.1

Hyun Wook Kim
Hyun Wook Kim
~ 2 years ago

Wouldn't it have impact on the performance given that handleNewChange and handleNewSubmit functions are going to create new functions on every render or is react smart enough to somehow optimize that?

Hyun Wook Kim
Hyun Wook Kim
~ 2 years ago

Wouldn't it have impact on the performance given that handleNewChange and handleNewSubmit functions are going to create new functions on every render or is react smart enough to somehow optimize that?

Let me rephrase that first bit. I meant that new functions will be created and assigned to handleNewChange and handleNewSubmit, and I'm worried about how this is going to impact performance. My question is, is react smart enough to optimize that or should we structure the code differently to achieve better performance?

Elijah Manor
Elijah Manorinstructor
~ 2 years ago

Adam, there is no video between the setup and this lesson. I wanted the focus of the lessons to be on hooks and not building class based components. However, I can see how that could be a bit jarring. At the point you watched the lesson there was a new version of the prerelease which caused this one to break. Everything has been updated so it should work fine now. Sorry for the confusion.

Elijah Manor
Elijah Manorinstructor
~ 2 years ago

Adam, there is no video between the setup and this lesson. I wanted the focus of the lessons to be on hooks and not building class based components. However, I can see how that could be a bit jarring. At the point you watched the lesson there was a new version of the prerelease which caused this one to break. Everything has been updated so it should work fine now. Sorry for the confusion.

Elijah Manor
Elijah Manorinstructor
~ 2 years ago

Fergus, yes... all deps have been updated now. Thanks

Elijah Manor
Elijah Manorinstructor
~ 2 years ago

Hyun,

For the most part you shouldn't need to consider new functions as a bottleneck to performance. If you find you app getting slow, then yes, I recommend going deeper but I tend not to optimize too soon as it may have little or no perceivable impact on the user since React does a pretty good job at perf out-of-the-box. However, when you do get into situations where you need to optimize then using useCallback, useMemo, memo, and useReducer can help in those situations https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

Vansh Gambhir
Vansh Gambhir
~ 2 years ago

For files Playground{1-5}.js, is there any reason for not exporting the function as default. It took me a while to realize why I couldn't call them after importing into App.js

Michael Friedman
Michael Friedman
~ 2 years ago
Michael Friedman
Michael Friedman
~ 2 years ago
Jesús Mendoza
Jesús Mendoza
~ 2 years ago

In the React documentation it says you can't call hooks from nested functions and you are calling the setState hooks inside the handleNewChange and handleNewSubmit. Is that ok?

Elijah Manor
Elijah Manorinstructor
~ 2 years ago

In the React documentation it says you can't call hooks from nested functions and you are calling the setState hooks inside the handleNewChange and handleNewSubmit. Is that ok?

Jesús, the hooks rule you are referring to https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level applies to calling the hook (useState, useEffect, etc...) not calling a function that one of them returns. setState is being returned from a useState hook and called later, which is okay. Good question.

Jesús Mendoza
Jesús Mendoza
~ 2 years ago

In the React documentation it says you can't call hooks from nested functions and you are calling the setState hooks inside the handleNewChange and handleNewSubmit. Is that ok?

Jesús, the hooks rule you are referring to https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level applies to calling the hook (useState, useEffect, etc...) not calling a function that one of them returns. setState is being returned from a useState hook and called later, which is okay. Good question.

Oh, ok. Thank you for the clarification and the fast response. It didn't make sense to me not to be able to call setState from inside a function. Thanks!

Shaun
Shaun
~ 2 years ago

For those confused as to why the codesandbox code doesn't match the video code if you uncomment the Playground import and set it as the default export you'll be good to go

peter
peter
~ 2 years ago

Where does prevState come from? is that something that is just defined inside of a hook?

Naman Sancheti
Naman Sancheti
~ a year ago

For those confused as to why the codesandbox code doesn't match the video code if you uncomment the Playground import and set it as the default export you'll be good to go.

Specifically, you need to add the 'default' keyword to any of the 'Playground' functions in the 'TodoList.func.js' file to make it the default export.