Tutorials on Usestate Hook

Here is the second tutorial in our 6 part YouTube series on React Hooks. We've already seen that React Hooks are arguably the biggest fundamental change to happen to React since its inception. Learning Hooks brings you up to speed with this important update to React. Now in this second tutorial, we will teach you the ins and outs of using the useState hook, the most commonly used React Hook, and thus, one of the most important ones you should know. You will see that state management using the useState hook is in many cases more straightforward than using class-based components. Function components have come a long way since React v0.14. Introduced as a simpler syntax for defining stateless, presentational components, function components can now handle state via the useState Hook.

Function components have come a long way since React v0.14. Introduced as a simpler syntax for defining stateless, presentational components, function components can now handle state via the useState Hook. This means you can define any component, stateful or stateless, with functions, and you no longer have to deal with the extra, unnecessary code that comes with classes. In fact, if you choose to write all your components as function components, then the bundle size of your React application significantly decreases. To understand how the useState Hook lets you manage state in function components, we must first revisit class components. When you create a class component, all of the component's state is stored within a single object. Within a class constructor, this object gets assigned to the component's state instance property, like so: