00:00:00 what I believe is the most important concept in React called the state.

00:00:06 State is like a React component's brain.

00:00:09 It holds information about the components that can change over time.

00:00:13 In this code, for example, if you have to track if someone has liked a movie or not, you'll have to use state.

00:00:19 If you use a regular variable, something like const has liked and set it to true, and then use it right here as a prop, hasLiked is equal to hasLiked.

00:00:30 Well, this won't work because React won't know that something has changed and it won't update the DOM accordingly.

00:00:38 That's because React's rendering process relies on state and props to decide when and how to re-render the components.

00:00:45 So, let's create a state that allows users to interact with each card and allow them to like or dislike that movie.

00:00:53 I'll start by heading over to our primary application and define our first state by saying const, and then you have to destructure an array like this,

00:01:04 and then make it equal to a call to the useState hook, which you have to import from React.

00:01:11 So right here at the top, import useState from React.

00:01:16 Keep in mind that in React, everything that starts with the verb use typically is referred to as a hook.

00:01:22 And React has many different hooks at your disposal to allow you to build your applications more simply and more scalably.

00:01:30 React being one of the most important ones.

00:01:33 And the way in which the use state works is that you first destructure the actual variable name.

00:01:39 In this case, we can name it hasLiked.

00:01:42 a Boolean variable in this case, and then as the second parameter to this destructured array, you can get a setter function that you can use to update

00:01:52 that state.

00:01:52 So in this case, set has light.

00:01:57 These are names that I just thought about on the spot, but you can follow this similar pattern.

00:02:02 First, you give a variable name.

00:02:04 It can be anything.

00:02:06 And then you say set and then use the same name.

00:02:10 This is the common practice.

00:02:12 For now, I said has liked and set has liked, but we're not yet done.

00:02:17 Within the parentheses, you can also provide the default value of that state.

00:02:22 In this case, the state is a Boolean.

00:02:24 So I'll say that at the start, The initial state of this hasLiked variable will be set to false.

00:02:30 And as you can see, I'm using WebStorm as my IDE, so it intelligently recognizes what this first parameter to the use state is,

00:02:38 and it is the initial state.

00:02:40 Of course, if a variable was something like a number, then of course you could set a 5 or 10 or any kind of value, or a string,

00:02:47 or even a complex object.

00:02:49 All of that is possible.

00:02:51 Now, right within each one of our movie cards, below the title, let's implement a button.

00:02:57 a button that will allow us to like a movie.

00:02:59 This button will say something like like and it'll have an on-click listener.

00:03:05 Within here, we can define what happens when this button is clicked.

00:03:09 We'll define a callback function within it, meaning that once this button is clicked, this function will be executed.

00:03:15 But more specifically, whatever is right here, either within this curly braces or after the arrow function will be executed.

00:03:22 In this case, I simply want to call the setHasLiked function, and I want to set it to true to be able to like it.

00:03:31 Now, as you can see, if I hover over this, it's going to say unresolved function, because within the scope of this card,

00:03:37 we haven't yet declared this SetHasLiked state.

00:03:41 It is declared within the app itself.

00:03:44 And this is where the beauty and the complexity of React comes, deciding on where you will define which piece of state.

00:03:51 If the state has something to do with all of these three cards, maybe something like hide all movies.

00:03:58 And then that can be true or false.

00:04:00 Well, it would make sense to have that state right here within the app.

00:04:05 But in this case, this has liked state will be different for each one of these cards.

00:04:10 So it makes more sense to take it away from here and add it to the card.

00:04:14 Now, if I save this, you can see a little like button appear right there, but let's also style that button further by heading over into our index.css and

00:04:25 just styling all the buttons on the page by giving them a border of none.

00:04:30 A font size a bit larger of about 30 pixels.

00:04:33 Once again, I'm used to writing CSS in JS, so I'm used to this different type of syntax.

00:04:39 And I think that just shows you that later on, once we develop this movie app, you'll learn a whole new way of writing styles,

00:04:45 which is much better and much faster than this one here.

00:04:48 We can also change the background color and make it transparent.

00:04:53 Let's give it a width of about 100%. As well as a text align.

00:05:00 of right.

00:05:02 And I know that this doesn't matter too much to teacher React, but I still want to make sure that you can visually see what this app is about and how all

00:05:09 of these features interact with each other.

00:05:12 And we can give it a cursor of pointer to know that this button is clickable.

00:05:16 That'll look something like this.

00:05:18 And now if we click like, we cannot really see that anything changes, right?

00:05:22 So how can we change the UI depending on the state?

00:05:26 Well, you simply do some conditional logic.

00:05:28 Instead of simply always saying like, we can do something like this.

00:05:33 Open up a new dynamic block of code, similar to what we did with the title.

00:05:37 So whenever you want to render just regular text, like this.

00:05:41 then it'll always say title, but if you want to use some dynamic variable, then you put it within curly braces, and that'll make sure to make it dynamic

00:05:50 and render the data of the variable that we're trying to render, not just the title text instead.

00:05:56 So here we can check if hasLiked is true, and if it is, then we can say liked, else we can say like.

00:06:04 So now for the first one, you can already see that it says liked, even though it's not that apparent because it's black.

00:06:10 But you can see that now I can click on all of them and they will all say liked.

00:06:14 And they'll stay that way until I reload the page.

00:06:17 So that is a very important thing to mention that the state is not persistent across browser reloads.

00:06:25 As soon as you reload the browser, the component will get re-rendered and the state will return to its initial values.

00:06:32 Now, instead of just saying liked and like, we can show some different kinds of hearts just so it's easier to visualize it.

00:06:39 And now think about it.

00:06:40 How would we unlike something?

00:06:43 That's a good question, isn't it?

00:06:45 Currently, we're always setting the has liked state to true.

00:06:49 How would we figure out if the state is already liked and then flip it like a switch?

00:06:54 Well, you can say set has liked is equal to not has liked.

00:06:59 So turn it around and flip a switch.

00:07:02 Now, if you click on it again, you can see that we can like and unlike it, and it happens instantly without a browser reload.

00:07:10 That's because when the state changes, React automatically re-renders the component to reflect the new data on the screen.

00:07:18 In this example, initially hasLiked starts as false.

00:07:23 Then we have the setHasLiked function which is used to update the state, and when you click the button, it flips the switch to set the state to the opposite

00:07:33 of its previous value.

00:07:35 React then rerenders only that card component.

00:07:39 And that's the beauty of React.

00:07:40 Like when you click and change this state, it only changes this one, and it doesn't touch any other cards or elements on the screen.

00:07:49 And then the updated hasLiked value is used to display either a red or a white heart.

00:07:55 But if we kept the state within the app and passed it as a prop, we wouldn't be able to like or unlike each card separately.

00:08:03 Having it here allows each card to manage its own state independently, making the component reusable and isolated.

00:08:11 I hope this makes sense.

00:08:12 The syntax we just used with useState, and as I told you when I introduced this hook, useState is just that, a hook.

00:08:20 Hooks are special functions in React that let you tap into React features, like state management in this case.

00:08:26 And there are many different types of hooks.

00:08:29 useState for managing state, useEffect for handling side effects like data fetching, useContext for sharing data across components,

00:08:38 and useCallback for optimizing callback functions.

00:08:41 There are plenty more as well, and we'll go over some of these in this crash course.

00:08:45 But if you're looking to dive deeper, I've covered all of them in detail, one by one, in my React.js Pro course, complete with practical examples,

00:08:55 when to use them, and why they're helpful.

00:08:57 You can find a link to that in the description if you're interested.

00:09:00 But for now, let's move over to the second most popular hook, Use Effect.