useState Hook - React In Depth
Let's learn about state, reactive UI and the useState hook together in React.
We start off by taking a look at why state management is important but also challenging in React. We look at how a simple approach to this doesn't work as intended and what React's solution is to this - the useState hook.
We go through an overview of hooks in general then focus in on how the useState hook allows us to notify React that data has changed in our app and to re-render components.
To wrap up we look at some visualizations on the internals of how this works for a clearer mental model.
Chapters:
00:00 Introduction
01:48 Purpose of React
04:58 A Reactive Counter
07:20 Counter Code Example
11:08 React Component Lifecycle
20:41 Hooks
23:27 useState Hook
37:32 useState Memory Visualization
40:00 Asynchronous Nature of Hooks
45:46 Putting it all Together
49:53 Object.is Comparisons
52:45 Next Steps
📦 Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/react-in-depth
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader