Why You Need to Understand Re-rendering in React and useState Hook

Very helpful explanation. Thank you.

Thanks for that very helpful explanation

How to re-render using redux

Bro talking in ×3 speed what's going on? Take your time

Finally, someone said it all in one place

You just saved my life! LOL

That made my brain click, thank you very much!

Nice video, I have a problem my component rerender many time and I don't know how to track the state or props that provoque this rerendering

Respect the drip... is all I gotta say...

When I was coding in JavaScript It was fun.
Hmm then I decided to learn React.
Ohh boy, I think React give me more headache than anything in my life. It is such a convoluted ball of "icecream" that I learned to hate!!
For the love of god, I wasted more time trying to understand React than anything, and still don' get it...

Thank you very much, I lost 2 hours trying to make up a solution, until I found your video🙂

You look different

Great vid man, where you going with that backpack? Can I come? =)

what kind of backpack are you wearing ? or something for posture??

So, I have “states” of cells of minesweeper game inside their parent (let’s call it GameField). When I change state (actually props) of one of 100 cells, I need to rerender other 99. It’s kinda pain for performance.

shallow diffing ! My god !

nice

Hi, I'm actively learning React at the moment, and one thing I would like you to answer (either here or in a video), is WHY React is better to regular JS, I understand that managing html is easier, but everything else seems so unneceserily complicated. Before this I was doing a lot of old JS for After Effects scripting (not as a pro, just needed better workflow for my AE projects), and when I compare React, just cannot figure out why is it so much better. I'm sure I'm missing some good point, but if you could elaborate, I would be grateful. thanks! Subbed.

OMG I LOVE YOU I WAS ABOUT TO LOSE MY MIND OVER MY COMPONENTS NOT RERENDERING

Thank u

Thanks, really helpful info, shame I didnt find this video earlier.

I like your vs code mam what is it, and really help full video btw

Thanks a lot man , i was actually following up a tutorial and had created a lots of useStates and commented some unrequired code for HTML part but when i got into api handeling i saw a bug as component might be re rendering again and again and making multiple calls , turns out this was the reason any useState if gets updated the whole component gets re render.

Very useful video.

Hey man! You just got a new subscribed! Your video was really helpful! I can stop bang my head on the wall! :)

This was more useful than I even expected. Thank you!

Hey there, new to react and I kinda think I solved it in a new way. I pass the setValue as a parameter into the function that makes the change in my data. I use it in the end replacing the return. Everytime I run the function new local variables are created and of course they have different pointers in memory, so setValue rerenders properly my page. I used it in combination with fetch api. Your video helped me understand why my "hack" worked when I couldn't figure out why my code was workin

Spreading is a shallow copy though. If you have some deeply nested object, you might still run into trouble. I like to use immer to solve this problem.

This helped a lot. Thanks!

When I learned react with class components this was the first thing that was known because this.state was an object. But when you see react videos with functional comps it seems that it's overlooked because the examples used is non obj/arr like a counter

Thank you so much. Documentation for me is like a firehose and you distilled exactly what I needed help with.

Really good video, thank you!

Thank you so much

Shit, thank you!

Thank you so much! Finally i understand how this works and this solved my bug.

Thanks sir. I was also not able to understand the same issue. but now its resolved .

I have struggled with issue for an entire day. I thought it had to do with useContext and changing data in an object or array in context. I am about to try this as soon as I get back to my computer. Thank you for such a good explanation. I found reacts docs on dynamic context a little confusing. I hope your solution works for me.

great explaination.. new subscriber here.. it solved my issue with the same workaround that I have done before..

I would like to add an another method also,
For Eg:
const[data, setData]= useState([])
=>If u want to change the setData with its state means(data)
=>Do as follows to re-render the component
setData((prevState : any)=>[...prevState])
=> By doing this It will also re-render the component with updatedData
I hope this will be useful 😃

great content, I just discovered your channel, this is a gem!

Why you are wearing a bag?? And you have something on your nose??

Very good explanation to a really loosely described subject. Nobody uses the term “pointer” any more with these “high-level” languages, but sometimes it is essential to use the right term, if that is exactly what happens behind the scenes. You really threw me a lifeline as I was frustrated with all the unwanted and unexpected renders. This doesn’t solve it all but I will continue with the specifics of “reconciliation” area. Thanks a lot !!! 👏👏👏🧠💪

This was insightful. Have been using new object references for state updates, but never really thought of it in this light.

Oh man, thank you so much for the tips!!

You're the man! A cool video idea btw would be "actions that cause a functional component to unmount". Cheers, mate.

... syntax is called the spread syntax, just say the term, it will be easier of beginners to search and learn through the topic

superb video, please continue these
error solving type of videos.

I'd give 5 thumbs up if I could.
Been looking into the async nature of the whole thing and it was frustrating me...hacking using useEffect (that was my solution, deep down I knew it was wrong)
This now makes so much sense...it is going back to the basics, which was months ago.

Great video! I wasn't sure where to ask you a question so I'm posting it here. I found a strange state update behavior that I found relevant to your solution video. If you set up a simple App like below and click the <div> the number will increase twice. I know it's happening because of a combination of using "React.StrictMode" and "useReducer", The function "App" is wrapped by <React.UseStrict> in my index.js file. Something is happening when I update the state obj property inside the reducer function. Like a double render that strict mode does but it holds the updated state and then comes back to execute the code in the reducer function. If you remove React.UseStrict and leave the code as is, it will work normally. If you leave it wrapped in strict mode and want it to work properly you have to do what you said in the video, copy the state properties to a new obj reference and return it. So instead of ( state.num++; return {...state} ) you do ( return {...state, num: state.num + 1 } ). What I don't understand is why the combination of useReducer and React.Strict cause that kind of behavior? If you don't use useReducer and use useState it will work fine. 🤷‍♂️

import React, { useReducer } from 'react';

const reducer = (state, action) => {
if (action.type === 'INCREASE') {
state.num++;
return {...state}
}
}

function App() {
const [state, dispatch] = useReducer(reducer, { text: 'Num: ', num: 1 });

return (
<div className="App">
<div onClick={() => {
dispatch({type: 'INCREASE',})
}}>{state.text + state.num}</div>
</div>
);
}

Thanks for any future insight and help!