Add State with the useState Hook to a React Function Component
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.
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).
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
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?
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?
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.
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.
Fergus, yes... all deps have been updated now. Thanks
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
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
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?
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.
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!
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
Where does prevState come from? is that something that is just defined inside of a hook?
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.