React Render Tutorial – 4 – useReducer
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704818741_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Render Tutorial – 4 – useReducer
In this video we are going to understand the rendering behavior with respect to the use reducer hook now use reducer behaves very similar to the eustate hook but for completeness let’s understand with an example i’m going to begin by creating a new folder in the components folder the folder name is use reducer
Within this folder i’m going to create a new file called use reducer.js within the file i’m going to use the snippet rafc to create a function component now for our example we are again going to implement a simple counter we can increment decrement and reset the counter let’s write the code
First import use reducer from react now the use reducer hook accepts initial state and a reducer function as its arguments let’s define that for a counter the initial state is zero so const initial state is equal to zero next the reducer function the function accepts state and action
As the two arguments and returns the new state the new state though depends on the action so let’s add a switch statement the switch expression is action if the action is increment return state plus one if the case is decrement return state minus one if the case is reset return
The initial state let’s also add a default case where we are simply going to return the current state now in our component we can call use reducer passing in the reducer and the initial state this returns the state variable which we are going to call as count and also the dispatch function
For the jsx i’m going to add a div tag that displays the current count followed by three buttons let me quickly copy paste the code format it and you can see here we have a div tag that displays the current count value and then we have the first button which
Dispatches the increment action on click the second button dispatches the decrement action on click and finally the reset button dispatches the reset action since our main focus here is to understand the rendering of the component let’s add log statement console.log use reducer render all right let’s include the component in app.js
And understand the render behavior like i mentioned already use reducer behaves similar to use state when it comes to rendering the difference is that with you state we have the setter function but with use reducer we have the dispatch function since we have just been through the ustade behavior
I’ll go over this fairly quicker on page load we have the log message from the initial vendor if i clear the console and click on increment decrement or reset the component re-renders so anytime you dispatch an action the component re-renders let’s go over the render and commit
Faces again so that you start to get the hang of this we begin with the component tree we have the app component and the use reducer component when we click on a button in the user reducer component the reducer hooks dispatch function is called which flags the use reducer component as
Needing an update during the render phase react will first go through the component 3 and identify the flagged components it sees that use reducer 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 then
It will diff the element produced from the previous render to the new render it will identify the changes and hand it over to the commit phase where the changes are applied to the dom this is what happens when you use the reducer hook in a react component now
Just like you state use reducer also has the exception if you’re updating the state to the same value after the initial vendor 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
So if i reload the page the component has finished its initial render the state value is zero if i now click on the reset button which again sets the state value to zero react will not re-render the component now though if i click on increment you can see that the component re-renders
And the state value is 1. if i click on reset the component re-renders and the state value is 0. if i click on reset again the component will re-render one more time here after any click on reset will not cause the component to re-render let’s go over the render phase for this
Scenario as well to be honest it is identical to what we had seen with you state but i want you to get bored of it not because of me repeating how it works but because you have understood the concept so well that you feel it is boring let’s do this
We begin with the component tree we have the app component and the use reducer component when we click on the button in the user reducer component the dispatch function is called which flags the use reducer component as needing an update react will go through the component tree and identify
The flagged components it sees that use reducer component is flagged however there is a catch react requires that use reducer 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 render phase for that component the bailing out part though has two cases if only the initial render is completed and the value passed into the dispatch 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 react generates the react element from the jsx reconciliation takes place react says that there is no change from the previous render and simply exits the render phase so that
Is the rendering behavior with respect to the user user hook let me quickly summarize it the dispatch function from a use reducer hook will cause the component to re-render however the exception is when you update the state to the same value as the current value 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 vendors react will render that specific component one more time and then fails out from any subsequent renders all right in the next video let’s talk about render and state immutability thank you guys for watching
Don’t forget to subscribe 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
Why Render behavior for useEffect is not explained ??
GoodJob!
*** React 18 UPDATE ***
The component re-rendering any number of times on pressing 'Reset' is expected behavior.
Early bailout of the hook useReducer presented in the video has been removed from React.
I like the way you explain, thanks. Everytime I use dispatch it rerenders. Is it just by me?
Secondly, no mater how many times I press the reset button on my system using the exact same code, it rerenders. Ps: I'm using react version 18.2.0
Hi, I've been watching your tutorials from the beginning of the react series and I say a big thank you. I have a question though, at the beginning of the series you use 'rfce' to create a functional component bit since the beginning of this reducer part you have been using the snippet 'rafc' is there a reason or both can be used?
Hooked with your way of explanation
You are reactor. good content you make me reactor.
this video needs an update
I think you need re-upload about this.
why would it rerender again if the state value is 0 (which is the same value) at 8:22 of the video ?
In react 18, I tried examples of this videos and previous video useState.
useState does not re-render when same value is assigned, But in case of useReducer, whenever reset button is clicked, console.log('UseReducer Render') is printed.
So i downgrade version of react, it works fine that re rencer does not occured.
Is there any internal changes when react version is updated to 18 ?
@8:14 can you pls explain what do you meant by if component is already rerendering? since reconcilation wont return any change in virtual DOM, what would initiate the re-render?
thank you for this tutorial,
I am looking forward for more under the hood tasks like fiber, browser rendering etc
Amazing
you are such a good teacher. thankyou sir
Hii bro, is the Redux Toolkit dispatch also treated the same way …??
great as always please do an clone app project in react js
thanks
Crisp and to the point. Loved it.
I think It'll be a good idea to show these concepts on a dummy count project, and the show a more complex use case.
Can the initialState be an Object with multiple key values ?
Love your tutorials, it's very easy to understand. Subscribed
What ia the difference between exit or commit phase
Thanks for such a amazing content. May we know which vs code theme you are using and all the extensions for react or javascript as well.
Thanks iget a lot of value from this series