React Hook
Regular JavaScript variables do not survive a React re-render. This video shows why that fails and how the useState hook solves it with a working gallery example.
Click a button in a React app and expect the screen to update, but nothing happens. That's the exact problem this video walks through: why a normal JavaScript variable can't hold onto a value between renders, and how the useState hook fixes it.
Why regular variables fail
The video starts with a small React app built around a gallery of sculptures, each with a name, artist, description, and image. The goal is simple: clicking a "Next" button should move to the next item in the array. The first attempt uses a plain local variable, an index that starts at zero and gets incremented inside a click handler. Clicking the button does increment the variable in the console, but the screen never updates. The reason is that local variables don't persist between renders. Every time React re-renders a component, it renders from scratch, and any changes made to a local variable are wiped out. Worse, updating a local variable never tells React that it needs to re-render in the first place.
What useState actually does
To fix this, two things need to happen: the data needs to persist between renders, and React needs to be triggered to re-render with the new data. The useState hook handles both. Importing useState from react and calling it returns two things: a state variable and a setter function, delivered as an array using a pattern called array destructuring. The video renames the example variables to index and setIndex, initialized to zero. Now, instead of a plain assignment, the click handler calls setIndex with the incremented value. React remembers the latest value it was told to set, so on the next render, index comes back with the updated number instead of resetting to zero. The gallery advances correctly, and clicking Next actually changes what's shown on screen.
How state persists across renders
The mechanics matter here: every time a component renders, useState returns the current stored value along with the setter function that can update it. When setIndex is called, React stores the new value, and on the next render it hands that stored value back instead of the hardcoded initial one. This is what makes state fundamentally different from a local variable. It's also why the convention of naming pairs like const [something, setSomething] = useState(...) shows up everywhere in React code.
Multiple state variables
The video extends the example by adding a second, unrelated piece of state: a boolean called showMore that toggles whether a description is visible. A second button flips this value between true and false using its own setter function, showing that a component can hold multiple independent state variables side by side. The general guidance offered is to keep unrelated pieces of state separate, and only combine them into one state object if they tend to change together.
Key takeaways
- Local variables don't survive a React re-render because the component renders from scratch each time.
- useState returns a state variable and a setter function as a two-item array, accessed through array destructuring.
- Calling the setter function is what tells React both to remember the new value and to trigger a re-render.
- A component can hold several independent state variables, and it's good practice to keep unrelated state separate.
- State variables should be declared at the top of the component function, similar to how imports are placed at the top of a file.
Who this is for
This is aimed at developers new to React who are working through the basics of hooks, following on from an earlier video in the same series on useEffect. It's a solid next step for anyone building their first interactive React components.
Full transcript(auto-generated, with timestamps)
[0:00]Hello everyone uh and welcome to this another video of basics of react series um so coming back from the previous video where we talked about um you hooks react Hooks and and and in particular we spoke about uh the use effect hook um today we'll be talking about U the use State and we'll be talking about state in particular so so we'll be going through uh the use of use State hook and why we using it and how important it is uh in reacts context so firstly let's uh focus on what a state is so state is basically a component's memory so components often need to change what's on the screen U as
[0:53]A result of the user interactions that we do so typing into a form uh for example should uh up create the input field or you know clicking next on an image kosal should change which image uh is displayed so clicking Buy on a particular product in shopping cart of an e-commerce website uh they should perform a particular change to that particular state so components need to remember things uh like the input value uh the image and the shopping cart so in react we uh this kind of component specific memory is called state so why are regular variables not enough in the context of react um so for
[1:44]Example here is an example uh a basic react code uh that I've just written U so I'm using play code. iio uh play code. iio react playround and uh I would suggest you to you know use this uh ground as well so there there are other ones like code andand works but for this particular example I've chosen this so I've already written uh some code uh uh regarding which just displays a particular uh object so the object has uh some data so I've created a uh a scul sculpture list it's an array of uh objects and each object has some uh data FS like name artist
[2:30]Description uh an image URL and uh yeah an alternate text for that image what I'm doing is I'm exporting this uh array and I'm importing it in my app.js and I want to display this particular uh the the array of uh objects so the task is you know uh when I click the next button it has to change it has to go to the next uh object in that array so for that I've written a relevant code F uh so this uh this is this function gallery and so inside of that I'm uh taking an index uh equals to zero so uh and I'm also uh calling a handle
[3:16]Click here so there's a button click here so when I click it it has to trigger handle click and the index has to uh increase to uh has to increment to plus one so when that happens so the sculptor uh uh moves to the second index the uh the next index and uh we would be displaying the uh uh the object the the the second object's name artist so on and so forth so this is what is supposed to happen but here when I'm clicking on the next button it's not happening it's just showing the first uh the data of the first index that you can see here so it's just
[3:59]The the first index data and it's not uh incrementing it's not changing so this will not work so what's happening is that the uh handle click event handler is updating the local variable index um but there are things that prevent that change from being visible so as we know uh in react um there's a lot uh it it renders with each and every change that that happens to it so local variables don't coist between the renders so when react renders this component a second time this Gallery component which I am you know rendering it inside of the app so it won't render so it uh I mean it
[4:46]Renders from scratch and it doesn't consider any change which happened to the local variables so let's do one let's do a console. you see it's not uh incrementing let's just do this place it so what you see here is that it is incrementing the index in the context of this function but um as it's a local variable it will not persist between the renders so when the index value is moving out of this particular function and going into this Global scope so it's losing that uh that state I would say that it's rendering this component uh from scratch so it it's it it won't consider any changes which
[5:57]Which is happening to the local variables and changes to the local variables it will never trigger a render so react will not realize that it needs to render the component again with the new data to update the component with new data two things need to happen so we need to retain the data between the renders and uh trigger the react to renders the component with new data so we have to make it rerender so for that uh use State hook provides uh the solution for that so uh a state variable uh can be used to retain the data between the renders and also uh a state set a
[6:39]Function will be used to update the variable and Trigger react to render the component again so to add a state uh uh to state to add a state variable let's import use state from react at the top of the file um uh another thing uh I would suggest is uh suggest uh to use playground is because uh when you create new uh uh projects of react in your local machines so it always Imports it always downloads all those modde modules and easily each and every project would go around 800 to 900 MB of size so that is not feable and especially if you're constraint for space so I would suggest
[7:33]To practice on playgrounds quote sandboxes okay so moving on um let's replace this let index equals to Z with con index and set index this um here index is a uh State variable and set index is a state set a function so I'll just tell you about it and rich is initialized to Z Okay cool so index is a state variable and set index is a set of function and this particular type of format syntax is called array destructuring and it lets us read the values from an array and uh the array which is written by the use state it always has exactly two items so this function it always has uh
[8:38]Two functions uh two two items uh it's the state variable and the state uh seter function so yeah so that this is the standard format of uh the uh the use datk so um it's it's uh it's the standard format of using it so now let's see how they work together in handle click so we've uh so when we click the next button the handle click even uh function is triggered so here what we we we will do is let's invoke the set index set a function uh uh yeah can do set index and we'll invoke this state which is index plus one so what this would do is
[9:30]When handle click event is triggered um it calls upon the set index uh seta function and it sets the state to uh an increment set by one so let's see if it works voil it works so yeah yeah perfect and you can see the index changing here as so so this is the state uh the use State hook and uh there are other other hooks also which uh uh start with use so and any other state uh any other hook which starts with uh uh use it's a hook I mean you can just recognize that that's a hook so hooks are special functions uh which are only
[10:24]Available while react is rendering and uh state is just one of those features but uh we will actually talk about the other hooks later so we'll see uh use state in detail here so when we call uh the use state so we are telling react that uh we want uh this component to remember something so in this case uh we want react to remember the state uh the index so the convention is to name uh pairs like const uh in index or set index like something or set something so we can also name it anything like like have putut index set index you can just say
[11:09]Anything else like cons number set number or uh con string comma set string and here we'll just say this would be the initial uh State uh value whatever we are passing as the parameter so here it's zero so that's the first uh index so I've set it as zero the only argument like I mentioned the US state is the initial value of the state variable and um here it is set to zero so every time the component renders the use State gives us an array of containing two values which is the state variable index uh with the value that we uh stored and the state uh set a function
[11:59]Which can update the state variable and Trigger react to R uh to render the component again so um so when our component enters the first time uh uh so because we passed the value as zero to use State as the initial value it will return um 0 comma uh set index and react will remember the zero uh is the latest value so if you can see this here we've printed uh the index here it remembers that so it will return that so when you update the state uh so when we click on the button uh here it calls the set index index plus one and so as index is zero so the so
[12:46]It's going to be set index of one so it returns one one comma uh set index so this is what it will be here it will be one comma set index uh uh and then on the second render it still sees uh U state zero uh but because react remembers that we set it to one it'll uh uh return one comma set index instead so that's the thing so doesn't really matter how many times we are clicking next so the use Speak the index initial value is always zero it will be zero because we have hardcoded the value but because we've uh because react remembers that we've Set uh the index
[13:37]With the previous value so it will always remember that and it will populate index with that particular value and it will return the set index function and yeah so on and so forth so if for example we can have a component can have multiple State variables and uh similarly um let's have uh so we have details right in the data.js we have some details so what we can do now is let's create a new State uh cons show more set show more so here we'll use use state so it's like uh a choice should should it show uh more or not so as it's a choice I'll say
[14:35]False so initially I'll take it as false and then um I'll create another button here for that I'll have to create a function function handle more K okay and here we'll call set show more show more I just say so whatever it is it would it would just flip the value of show so let's create a button here um yeah yeah what we can do is let's create a and here show
[15:49]More if it is true we'll just uh say hide if not we'll make sure and one click it has to trigger handle work right and here in the image not just image I think what we can do is below this button if show more we'll have a tag with the description
[17:00]Dot description um yeah so where do we have this can remove all of this but okay so um so like oh yeah now you can see this let's console log few more uh let's run it again so here it's false so the initial value is set to false and it doesn't really show anything because um we are saying that if it is um if it
[18:11]Is true then it it has to turn the text has to turn to hide and if it is false it has to show show and also if the showmore is true uh only then we can see the description and the initial state is set to false so when I click on this button show more you can see the description so what's happening here so when I'm clicking on this button it's triggering the function handle more click and here in the handle more click it's flipping the state of the Set uh the show mode to whatever it was I mean it's flipping it to the other one for example if it it is
[18:51]False it turns it to true now if I click that again it's flipping it to false so that uh so this is a good idea to have uh it it gives you a good idea of what's actually happening um in in using US state so it's a very important uh and one of the most basic Hooks and it's also a good idea to have multiple State variables if their state is unrelated like uh in this example index and show more and uh if we find that we have uh that we often have to change uh the two State variables together it might be easier like to combine them
[19:32]Into one so yeah and always It's always important to keep the state isolated and private and state is local to a component instance on the screen and if we render the same component twice each copy will have uh a completely different isolated state or a completely different uh a state and also State uh uh State variables need to be declared at the top at the start of uh the component uh function just like we import uh all these uh important packages at the top so it's it's very important to remember that and yeah this is pretty much a basic example of the UST State reactor
[20:20]And um yeah uh it's in simple terms it's a component memory uh state is a component memory and use State hook uh allows us to you know manipulate uh the uh a component's memory in a in a very efficient and uh uh compliant uh in a way which is compliant to react and uh yeah that's pretty much it and see you in the next one thank you
More from React
17:27React hooks
29:30Building a Weather App with React & Axios | React Basics Series Part 3"
18:33Basics of React - Part II
34:41Basics of React by Humanitarians AI Fellow Raghu Teja | Powered by Bear Brown & Company
2:08Bridging the Pixel Gap in Browser Automation.
2:23