React Render Tutorial – 3 – useState
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704616183_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Render Tutorial – 3 – useState
All right it’s finally time to get started with some code and our first video is about use date let’s understand with an example the rendering behavior in react when we are dealing with the use state hook the first thing i have to mention is that i have created a new react project using
Create react app so go ahead and run the command npx create react app followed by your project name i have named the project as react render demo once your project is created in the source folder create a new folder called components this folder will contain all the code we are going
To write during this series since this video’s focus is on the use state hook within the components folder i’m going to create another folder called ustade u and s in uppercase within this folder i’m going to create a new file called use state.js again u and s uppercase
Within this file i’m going to use the snippet rafc to create a function component all right that was a bit of work but we finally have a component to understand the rendering behavior with you state for this example we are going to create a simple counter so import you state at the top
And within the component create a count state variable and the setter function so count set count and the initial value is zero for the jsx i’m going to add a button that increments the count value button the inner text is going to be the count value and on click we increment
The count value by calling set count where we take the previous count and increment it by one and that is pretty much our component and what we are really interested in is the rendering of this component so i’m going to add a log statement use state render to identify
When this component is rendering or re-rendering let me quickly format it and quickly in the comments if you can leave an opinion as to whether this is the font size or this is the font size you would prefer i changed my monitor and i can’t remember the settings anymore
So just let me know in the comment section and i’ll stick to it once we have this use state component ready let’s include it in app.js and test it out so open app.js include use date make sure to import it at the top and then let’s head to the browser
On page load if we take a look at the console we can see two lock statements if we check our component though we just have the one log statement but the statement was logged twice now this can be really confusing at first but this is because of the strict mode
Encouraged by create react app if you take a look at index.js you can see that our app component is wrapped with react dot strict mode what this wrapper does is intentionally double invoke the function component body only in development mode if you deploy to production however you would see the lock statement only
Once as intended now if you want to understand why the strict mode double invokes or just want to learn more about strict mode in general i would advise you to go through the react docs for now the fix is to simply comment out this wrapper component
If we now take a look at the browser we see the log statement only once which is what we would expect from the initial render now let’s focus on the role of use state after the initial render one of the ways to flag a component for re-render
Is by calling the setter function from you state in our component we are calling set count on click of the button if you go back to the browser clear the console and click on the button you can see that u-state render is logged in the console with every subsequent click the setcount function
Will flag or queue a re-render of our component and the message is logged in the console every time this is probably one of the more common things that we learn when using the use date hook let’s understand this re-rendering behavior with respect to the render and commit phases
We begin with the component tree we have the app component and the use state component when we click on the button in the ustate component the state hooks setter function is called which flags the use state component as needing an update during the render phase react will first go through the component tree
And identify the flag components it says that ustate is the only component that needs an update react then uses the create element method to convert the component’s jsx into a react element it will then diff the element produced from the previous vendor to the new render it will identify the changes
And hand them over to the commit phase where the changes are applied to the dom this is what happens when you use the state hook in a react component now what is a special case with you state and re-rendering is that if you update a state hook to the same value as
The current state react may render that component one more time and then bail out from subsequent renders let’s try to understand what i mean by that with an example in the components jsx i’m going to add two more buttons first button will simply set the count value to zero so count to zero
On click set count zero and the other button is going to set the count value to five so set count five count to five let’s now head to the browser and see what happens on page load we have the one log message from the initial vendor
If i click on the first button the component re-renders and we already know about this however if i reload clear the console and click on the second button which is count to zero the component does not re-render and i can click on it as many times as i want to
So after the initial render if you call a setter function but set the state to the same value the component will not re-render next let’s talk about the count to five button i’m going to reload the page and this time i’m going to click on the first button five
Times which logs the render message five times so one two three four five you can see the message has been logged five times now i’m going to clear the console and click on the count to 5 button you can see that the component renders one more time
However if i click on the same button again as many times as i want to the component does not re-render let me clear the console click it again the component does not re-render if i increment it by one though and then click count to five again it will re-render as the state value
Changes again so after a component has been re-rendered if you set the state variable to the same value the component will re-render but only one more time let’s quickly revisit our interface and understand what happens we begin with the component tree we have the app component and the use state component when we
Click on the button in the ustade component the state hooks setter function is called which flags the u state component as needing an update react will go through the component tree and identify the flagged components it sees that the u-state component is flagged however there is a catch
React requires that you state updates must pass in or return a new reference as the state value if the state is a primitive type it has to be a new string or number or boolean if it is not the case react will simply bail out from the interface for that component
The bailing out part though has two cases if only the initial render is completed and the value passed into the setter function is the same as before the render phase bails out from proceeding further however if the component has been re-rendered already then the component will proceed with the render phase
One more time and dan abramov mentions this as a safety net that is required as react won’t actually know if it’s safe to bail out in all cases until it renders again so the render phase proceeds and generates the react element from the jsx the reconciliation takes place react sees that there is
No change from the previous render and simply exits the render phase so it’s important to note here that react goes to the render phase only to discard the result so that is the rendering behavior with respect to the use state hook let me summarize it so that it stays in
Your head for a longer duration of time the setter function from a u state hook will cause the component to re-render however the exception is when you update a state hook to the same value as the current state if you’re updating to the same value after the initial render
The component will not re-render if you’re updating to the same value after re-renders react will render that specific component one more time and then bails out from any subsequent renders by the way if you’re wondering how the comparison is made between the previous and the current state react uses the object dot ease
Comparison algorithm which you can google for more information i hope this video gives you an insight into the type of content you can expect in this series in the next video let’s take a look at the reducer hook which is similar in its behavior i’ll see you guys in the next one
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
bigger font size is better
larger font size
If the render stills bails out after passing the same value after a rerendee then why does it displays on console log?
Vs theme name plssssssssssssss
first setting is fine for rendering on new monitor
larger font size please
GoodJob!
Nice one
larger font (2nd one) seems better to me.
You are a great explainer. Well done!
I think at the time we decided that we don't actually know if it's safe to bail out in all cases until we try render again. The "bailout" here means that it doesn't go ahead to render children. But re-running the same function might be necessary (for example, if a reducer is inline and we don't know if we bail out until we re-run the reducer on next render). So for consistency we always re-run it on updates during the render phase.
– Dan Abramov
upload ur src to github pls! that would be great help !
Second font size
I would recommend this channel to all who wants to learn react….this is the best so far I have seen
Nice 👍
Essential topic and a good structure ! Thanks a lot !! Yet, it would have been better to mention that the states which are not primities but rather objects do not automatically trigger a re-render if its children is updated.
Starting with React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions.
Awesome explanation as always😊
I think in the development mode , rendering twice problem is fixed (not sure what it is ) , I checked it myself it actually renders only once in the strict mode in development process too
The 2nd larger font size seems perfect
Thank you for demonstrating your great kung-Fu!
👍
I think I followed everything correctly but I don't see the double-invoking effect in strict mode. I'm using react version 17.0.1. Something changed?
In 1:50 how does he make the setcount with capital C so quickly? dose anyone know the shortcut?
bigger better
Hi @codevolution,
Wanted to understand, why it got re-rendered 1 time even too, when state value was 5 and you clicked on that button which make state as 5.
It'd not re-render even 1 time as well right, because as you told that before re-render it'll check state and if there is any diff then only it'll update otherwise it'll be discarded, right ?
Between thanks for providing really good content on youtube. You're actually doing hard work to present all this as free.
Thank you for providing such a useful content. Keep going.
I've tried a similar example, but using the react profiler. Strange how it does not show the second re-render after you update the state and then update it again. Maybe the profiler only shows commits?
update: Just checked. the profiler just logs commits.
Second font is better
I'm 52, I need the bigger fonts. Thanks.
Second font size. Thank you
Thank you!
What is the difference between setCount(c => c+1) and setCount(count+1)?
VERY NCE!
What’s the difference between calling a function like this {handleFunction} versus {() => handleFunction} ?
Man you are doing great job.