Stop worrying about React Re-renders so much (an overview of the react profiler with refactoring)

Just sharing some thoughts about rerenders in react and performance tuning. A lot of people comment about react performance with rerenders. Remember this quote: "Make it work, make it right, make it fast"
------------
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/codyseibert/youtube

[@adivp7]

Developers will usually have faster machines than users. And users will do more than just use your one app. Not worrying about performance and resource usage is how we get terrible apps like MS Teams

[@codingispower1816]

True, using the performance tab in chrome to purposely use 1 core and 4x slow down your code and then comparing in the profiler is helpful to simulate worst case scenarios.

[@clusterdriven]

So true

[@vivekkumar-pc1xy]

Great video! I've been exploring various blogs and videos to gain insights into React re-rendering. Your video provides an excellent real-world perspective on the topic.

[@David-zv5kw]

awesome video! thank you so much!

[@varileshtlesht7091]

Thank you for your video it was very clear. Can you please do a video when you explain in details the useMemo and useCallback and when to use them. I would appreciate it.

[@datfeela2578]

Great video, keep it up!

[@Icemourne_]

In my experience, you as a developer can simply never see any slowdowns while some of your users are getting a terrible experience. In my specific case problem is the AMD CPUs especially on Firefox.

[@CottidaeSEA]

The human eye only being able to recognise 30 fps is a myth. We're able to notice far more than that. It's said that 24 fps is required for us to interpret video as motion. I don't know how precise that number is however. I can see a clear difference between frame rates even upwards of 100 fps, after that the updates are too frequent for me to notice a difference. However, some people can notice even more frequent changes. We might not necessarily be able to react to all changes however. Our eyes don't use a concept such as frames to begin with, we continually interpret changes, and how well we process the information depends on ability, and that can be improved through training. However, being bothered by a change that takes far less than 1/30 of a second is pointless as you said. I'd say about 50ms is within an acceptable range when it comes to responsiveness.

[@RaZziaN1]

yeah but we have two eyes so it is 60fps, and mine are super fast so 144

[@CottidaeSEA]

@@RaZziaN1 Big brain time!

[@WebDevCody]

I’d have to go check for myself with my own broken eyeballs. When playing a game I can easily notice the difference between when my pc is running at 30 vs 60 fps, but idk about if I’m just watching a video. But yeah my main point is a lot of people will be fast to comment when doing something in state will cause extra rerendering when in reality it doesn’t make a impactful difference to the Ux. Most of the time in a web app is waiting for the server to send back json or confirm my post requests. When it is slow, make it faster and don’t get caught up on premature optimization

[@CottidaeSEA]

@@WebDevCody Agreed. Besides, most performance issues are due to design choices rather than re-renders.

[@VictorZamanian]

@@WebDevCody Yeah, the human eye can recognize MUCH more than 30 fps. I can easily notice the difference between 144 Hz and 240 Hz when I switch it up before starting up a game e.g. Don't get me started on 60 Hz (literally a slideshow when playing a game) and 144 hz. Day and night. The weird thing is, watching a gaming _video_ at 60 Hz looks super smooth, but _playing_ it? Choppy af, man.

[@user-oy4kf5wr8l]

Great video, thx!

[@SeibertSwirl]

Good job babe!!!

[@carljkempe]

Goals

[@deepanshhh]

Great video but not for everyone. I develop web apps using react three fiber (a react based wrapper around threejs) for building 3d experiences. Where your application needs to run at 60-90 fps, and even the smallest things can cause a frame rate drop, avoiding react to re-render lots of times becomes a very important thing

[@Chrosam]

I always say that computation isn't the biggest issue anymore. But rather network calls are. However, I still find myself trying to optimize rendering prematurely..

[@brownboyintokyo7368]

When do u recommend shifting to state sharing tools like Redux Toolkit over React context?

[@WebDevCody]

When and if you find redux actually improves your code maintainability. If your app still runs fine and it’s easier to understand where state is coming from I see no need to switch from context. Some people will say content causes extra rerendering but until you prove it’s a problem, it’s not a problem

[@mohammed.haydar]

@@WebDevCody I love this explanation, I use useContext and depend solely on it in my app. Whenever I see people use Redux and whatever tools are there, I get worried bcuz then I need to learn all those new concepts! lol, I'm just not in a mood to learn something like Redux

[@brownboyintokyo7368]

@@WebDevCody Thank you! Yes, many developers do claim about context causing extra rendering so I was wondering whether it is better to switch to a proper state management toolkit like redux or not. But yes you are right cuz there is no point in switching unless the app runs into some major issue.

[@codingispower1816]

How to decide when to use memo vs just pulling the component to a higher state?

[@WebDevCody]

I think memo just gives more flexibility to move the component where ever

[@discoRyne]

3:13 as a gamer, this statement is complete pain. Nice vid tho.

[@WebDevCody]

Thanks!

[@amans6504]

So re rendering here only means re rendering the vdom right?

[@WebDevCody]

Yes, at least that’s what they mean when they say rerender in the react docs

[@yeet141]

Great video, but what you said about 30fps is a myth. Apologies if the joke flew over my head.

[@cirovevatovevato4554]

@1:25, shouldn't you have said "... what the VIRTUAL DOM looks like..." instead of SHADOW DOM?

[@WebDevCody]

Yeah probably

[@kaos092]

It's not a shadow DOM It's a virtual DOM. Two completely different things.

[@jonny9425]

The only thing this video does is explain why you SHOULD be concerned about re-renders

[@itay_hd]

3:15 The human eye can see way above 30fps

[@WebDevCody]

From what I read it’s 30-60

[@itay_hd]

@@WebDevCody common mistake bro

[@WebDevCody]

@@itay_hd I’m not convinced. You show a 30 fps movie to my grandma vs a 60 fps movie, I don’t think they’ll be able to tell the difference

[@itay_hd]

@@WebDevCody excuse me wtf? Are you serious? I had a 60hz monitor and switched to 144hz and there is a diffrence. If you and you have 40 fps you will feel BIG diffrence between that and 60. Are you being fr?

[@oumardicko5593]

i'm not a react dev, right now, the big problem react has for me is not re-render, it's all those crazy hooks they have.

[@imhassane]

In a project you use only three actually

[@WebDevCody]

Avoid useEffect at all costs lol

[@oumardicko5593]

well, i'm not a react dev so i'll trust you on that but can you imagine how frustrating it can be for a newbie to start learning react and see theses hooks all over the place and then learn latter that they have to worry about re-rendering !!!

[@imhassane]

@@oumardicko5593 I’m an react native intern and I actually only use useEffect and useState most of the times, sometimes there is a useRef but I just use the first two and yes we should learn about re-renderings but most of the times it’s not that bad, I’ve rarely seen slow re-renders and usually you just have to change a bit of logic and it’s good and this is fun to learn about. I don’t want to work on a technology that doesn’t challenge me, I want to learn more and react is fun 🤩

[@ilearncode7365]

"A human cannot detect higher than 30FPS". All future opinions stated, discarded

[@WebDevCody]

Sure, maybe it’s like 60 fps, but that wasn’t my point in this video

[@kabiskac]

@@WebDevCody or hundreds

[@discoRyne]

@@kabiskac Potentially ~1000fps. When it comes to gaming average gamers will only be able to tell the difference up to 120-150fps/hz. The more competitive you play, the more you'll recognize higher FPS (when matched with the same refresh rate, of course.) My jump from 144hz to 240hz was huge, but not as drastic as 60hz to 144hz. The difference is astonishing as well as the extra power needed to keep up with higher framerates on both the display and CPU/GPU. Given 60hz dominance and standard, I'd consider 60fps to be the minimum target if you're looking for clarity. 50hz/50fps for PAL-region stuff if the standards still hold up to this day.