00:00 In React, when you initially render the page, the React is going to create DOM nodes out of those elements that you give it from your components. But then the user can interact. Most of our applications that we're building, they have some level of interaction to them. That's what makes them dynamic and interesting. When the user interacts,

00:19 we want to change something about the page. State is going to change. We're going to have something that says, here's the value of our counter button. It's currently zero. Then the user clicks the button, it should increment to one, so that's a state change. State can be defined as data that changes over time. So the user interacts, we update some state.

00:39 That tells React, hey, it's time to re-render. The old UI that you had before, that's out of date. That was based on some state that we had before. We have some new state now. I want you to make some new UI. And so it will call our functions again, and we'll have the latest state.

00:55 We'll give it the new UI for that particular state. And then we'll give that back over to React, and React will say, okay, let me see. Here's the old UI, and here's the new UI. Let's compare those things and see what we need to change. Oh, we need to change the text content of this button. So we'll go and make those updates to the DOM,

01:15 and then we'll wait for the next user interaction. So this is the life cycle of a React app, of even individual components in a React app. So we have the initial render that creates the DOM. The user interacts with that. We update some state, React re-render, or calls our functions again, it re-renders, and the DOM is updated.

01:35 So the way that all of this is managed is using a handful of hooks, and there are many more hooks than what we have here, but these are some of the hooks that we're gonna be exploring today and in future workshops. And the one we're gonna be talking about in this exercise is useState. So useState accepts a value.

01:54 It could be anything. It could even be a function, or a symbol, or what you might expect, an object, or a number, a Boolean, whatever. So it's just some data, and then it returns the current value of that state and a mechanism for updating it.

02:12 So this value right here, this is just the initial value, how we start out, like when we are initially rendering, this is the value it should take. Thereafter, that first argument to useState isn't used. So this function component's gonna get called over and over and over again every time we change state,

02:30 and the only time that the useState hook cares about this first value is on the initial render. So useState is going to always return the latest version of the state as well as the mechanism for updating the state, and then you can render whatever UI you need based on that state.

02:48 So here we're rendering our count as the children of the button, and then we also create this increment function, which we'll call setCount, and take whatever the current count is and increment it by one. So every time you click on the button, then this function gets re-rendered again,

03:06 and the count will be incremented from what it was last time. We create a new increment function that will increment it one further than what it is now, and we pass that to the onClick event of the button. So when the button is clicked, then we will increment the count, and the count is going to always be displaying the latest version.

03:27 So every time there's a re-render, React is gonna say, okay, here's the old UI, here's the new UI, it's comparing React elements, and it says the only difference between these is the content of the button, or the children of the button, is different. This was zero, this was one, so I'll go and update the text content of the DOM.

03:43 That's the basic idea of managing UI state in React. You just have the actual state, you generate UI based off that state, you do something that triggers a state update, React will call your function again and give the new latest state, and so you can return new UI, and then React will do the comparison,

04:03 and it will update. As far as the reconciliation between the old UI and the new UI, React does this because it gives us a nice declarative model. We never have to think about manually doing updates ourselves imperatively, or any of that, it's all just managed for us. We just say, based on the current state of the world,

04:26 this is what the UI should look like, and then React makes sure that the DOM stays updated based on that, in a very efficient way. So, in this exercise, we're gonna be playing around with this kind of a blog search sort of thing that you can look forward to, it's gonna be a lot of fun. I'm looking forward to going through

04:44 all these exercises with you, so let's get started.