Тёмный

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

Web Dev Cody
Подписаться 233 тыс.
Просмотров 17 тыс.
50% 1

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/cod...

Опубликовано:

 

7 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 48   
@adivp7
@adivp7 2 года назад
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
@codingispower1816 8 месяцев назад
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
@clusterdriven 5 месяцев назад
So true
@CottidaeSEA
@CottidaeSEA 2 года назад
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
@RaZziaN1 2 года назад
yeah but we have two eyes so it is 60fps, and mine are super fast so 144
@CottidaeSEA
@CottidaeSEA 2 года назад
@@RaZziaN1 Big brain time!
@WebDevCody
@WebDevCody 2 года назад
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
@CottidaeSEA 2 года назад
@@WebDevCody Agreed. Besides, most performance issues are due to design choices rather than re-renders.
@VictorZamanian
@VictorZamanian 9 месяцев назад
@@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.
@Icemourne_
@Icemourne_ 2 года назад
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.
@vivekkumar-pc1xy
@vivekkumar-pc1xy 11 месяцев назад
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.
@varileshtlesht7091
@varileshtlesht7091 2 года назад
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.
@deepanshhh
@deepanshhh 4 месяца назад
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
@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..
@discoRyne
@discoRyne 2 года назад
3:13 as a gamer, this statement is complete pain. Nice vid tho.
@WebDevCody
@WebDevCody 2 года назад
Thanks!
@jonny9425
@jonny9425 4 месяца назад
The only thing this video does is explain why you SHOULD be concerned about re-renders
@David-zv5kw
@David-zv5kw Год назад
awesome video! thank you so much!
@SeibertSwirl
@SeibertSwirl 2 года назад
Good job babe!!!
@carljkempe
@carljkempe 2 года назад
Goals
@yeet141
@yeet141 Год назад
Great video, but what you said about 30fps is a myth. Apologies if the joke flew over my head.
@datfeela2578
@datfeela2578 2 года назад
Great video, keep it up!
@user-oy4kf5wr8l
@user-oy4kf5wr8l Год назад
Great video, thx!
@codingispower1816
@codingispower1816 8 месяцев назад
How to decide when to use memo vs just pulling the component to a higher state?
@WebDevCody
@WebDevCody 8 месяцев назад
I think memo just gives more flexibility to move the component where ever
@rumonintokyo
@rumonintokyo 2 года назад
When do u recommend shifting to state sharing tools like Redux Toolkit over React context?
@WebDevCody
@WebDevCody 2 года назад
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
@mohammed.haydar 2 года назад
@@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
@rumonintokyo
@rumonintokyo 2 года назад
@@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.
@oumardicko5593
@oumardicko5593 2 года назад
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
@imhassane 2 года назад
In a project you use only three actually
@WebDevCody
@WebDevCody 2 года назад
Avoid useEffect at all costs lol
@oumardicko5593
@oumardicko5593 2 года назад
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
@imhassane 2 года назад
@@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 🤩
@kaos092
@kaos092 Год назад
It's not a shadow DOM It's a virtual DOM. Two completely different things.
@ilearncode7365
@ilearncode7365 2 года назад
"A human cannot detect higher than 30FPS". All future opinions stated, discarded
@WebDevCody
@WebDevCody 2 года назад
Sure, maybe it’s like 60 fps, but that wasn’t my point in this video
@kabiskac
@kabiskac 2 года назад
@@WebDevCody or hundreds
@discoRyne
@discoRyne 2 года назад
@@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.
@cirovevatovevato4554
@cirovevatovevato4554 Год назад
@1:25, shouldn't you have said "... what the VIRTUAL DOM looks like..." instead of SHADOW DOM?
@WebDevCody
@WebDevCody Год назад
Yeah probably
@amans6504
@amans6504 2 года назад
So re rendering here only means re rendering the vdom right?
@WebDevCody
@WebDevCody 2 года назад
Yes, at least that’s what they mean when they say rerender in the react docs
@itay_hd
@itay_hd 2 года назад
3:15 The human eye can see way above 30fps
@WebDevCody
@WebDevCody 2 года назад
From what I read it’s 30-60
@itay_hd
@itay_hd 2 года назад
@@WebDevCody common mistake bro
@WebDevCody
@WebDevCody 2 года назад
@@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
@itay_hd 2 года назад
@@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?
Далее
You Probably Shouldn't Use React.memo()
10:17
Просмотров 55 тыс.
Stop Doing this as a React Developer
12:27
Просмотров 162 тыс.
The correct way to optimise React
11:29
Просмотров 33 тыс.
Preventing React re-renders with composition
12:11
Просмотров 19 тыс.
Goodbye, useEffect - David Khourshid
29:59
Просмотров 499 тыс.
You might not need useEffect() ...
21:45
Просмотров 159 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 474 тыс.
My 10 “Clean” Code Principles (Start These Now)
15:12
Optimizing Rendering Performance in React
7:50
Просмотров 74 тыс.
How To Debug React Apps Like A Senior Developer
21:07
Просмотров 131 тыс.