In this lesson, I fix a broken counter component by introducing the useState hook in React 19. The core issue is simple: React doesn’t know when to update the screen, and it also doesn’t remember the count value between renders. So I import useState as a named export from React, call it inside the component with an initial value of 0, and use array destructuring to get back two things: the current state value (count) and the setter function (setCount). From there, I bind count in the JSX and update state correctly by calling setCount(count + 1), which triggers React to rerender with the updated value. I also show an important detail: useState can take a function as the initial value. This “lazy initialization” function runs only on the initial render, not on every rerender, which is useful when computing initial state is expensive (localStorage reads, heavy computation, etc.). To round things off, I build a LoginCard component using boolean state (isLoggedIn) and string state (message) to demonstrate toggling UI and handling controlled inputs. The big takeaway: state is local to each component instance, updates via the setter trigger rerenders, and you can manage multiple pieces of state independently.