Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
States & Hooks
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.