How to use the React Profiler to find and fix Performance Problems

Подписаться 497 тыс.

Просмотров 155 тыс.

50% 1

Learn how to profile your React application and fix performance problems.
----
If you like cooking, checkout my side project: www.mysaffronapp.com/
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitch: / benawad
GitHub: github.com/benawad
LinkedIn: / benawad
Instagram: / benawad97
Twitter: / benawad
#benawad
TikTok: / benawad

----
Follow me online: voidpet.com/benawad
#benawad

Наука

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

28 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 80

@user-he1fe8yl9w 5 лет назад

best video about react profiler for now. nice and simple. thank you!

@shivroy652 5 лет назад

Dude. You are beautiful. You know what developers want to see. One of the best video on react profiler. to the point no more non-sense .

@jguix 3 года назад

Thank you, that was a really concise and good explanation on how to use the profiler and interpret flame graphs, just what I was looking for.

@TuanNguyen-vk4fu 4 года назад

Thank you, Ben. The best video explanation for profiler in react.

@samartajshaikh2601 2 года назад

This is really one of those which everyone wants to know about but don't know where to start. Thanks for this video. 👍

@ShawnRice-eg3il 2 месяца назад

Great rundown. Thanks!

@markhyoutube 2 года назад

Fantastic performance guide, many thanks!

@beeenthere 5 лет назад

Thanks for this! Really helpful.

@TheOrlstefano 4 года назад

Great video. Really helpful. Thanks a lot

@pawanmittal6166 3 года назад

Awesome Video with superb explanation.

@VerySadBatman 4 года назад

This was awesome! I'd really love to see how you structure your React app to scale. Please do a video on that 🙏.

@bawad 4 года назад

Are you talking about folder structure?

@VerySadBatman 4 года назад

@@bawad Yes. Folder structure; where you decide put things like components, contexts, tests, and how they all come together.

@bawad 4 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-M4rYfq5foPA.html

@blyfo 2 года назад

this is a great question

@md.mashnoorsaifkarim3453 Год назад

@@blyfo I second that

@cebuch. 2 года назад

very helpful and packed with only needed info

@deepwebtube 3 года назад

Great inputs sir!

@sushmitakumari8252 Год назад

Outstanding.. this is what I expected 😊

@yusf1945 Год назад

Thanks man. This is really good one

@nbaua3454 3 года назад

Best content on your channel..keep it coming

@Jrrs2007 2 года назад

This was great!!!!! More guidance on the tools!!!!!! Please 😁

@luanecarolineaquinocavalca1064 Год назад

thank you! very well explained

@ankitmehrotra8519 4 года назад

Hey Ben..Great video as usual. A small request for video for optimization of javascript app, react app, code splitting.

@victorfigueiredo6031 Год назад

Excelente vídeo, me ajudou demais!

@aqua123670 5 лет назад

awesome, thanks

@tyrrelldavis9919 3 года назад

Yo I'm having the same problem with redux atm. Am on Linux, seems like it's a function that keeps running itself forever or something. Makes my entire computer freeze after a little bit of time. Hopefully will be fix by end of today. Ben is one of best js RU-vidr, much abundance quality & humor

@punisher013 2 года назад

excellent! thanks man

@HOLONIA4EVER 2 года назад

Very useful, thanks.

@cryptonative 4 года назад

Hi Ben. Thanks for this very informative video. What’s the name of cocktail app you are optimizing in this video?

@petrosc7608 Год назад

great video, thanks a lot

@segevitsky 2 года назад

Cool video thanks!

@jivkojelev3744 3 года назад

Is there any special setting for render count ? I don't see the count in my profiler.

@vinayadiga1674 4 месяца назад

Thanks Sir!

@tegaogheneovo5881 3 года назад

Oh shoot exactly what I need, been at this for a whole day bro trying everything this is a fairly standard approach..thanks😔 lol ask Ben first

@speculativesapient7139 Год назад

How do you get the extra information for components about total renders, props etc.? It seems the default setup doesn't provide that information.

@arvindvs8934 3 года назад

Is there a tutorial video for the cocktail app shown in this video? Can someone please guide

@neeraj1bh 3 года назад

Is the Profiler API from docs and Profiler Tab in Dev Tools same.

@rhidlor8577 3 года назад

Thanks

@cristiantorres853 2 года назад

how to use the lazy loading as you mentioned?

@cubiq1 4 года назад

7:54 The Chip component's color prop will not be strictly equal (===) when its parent (IngredientPicker component) re-renders because of the inline function. This could potentially trigger a re-render of _all_ mapped Chip children whenever IngredientPicker re-renders. Same goes for the onClick handler prop. Surely these inline functions should be removed before relying on things like React.memo()?

@bawad 4 года назад

good point

@umnajdi 2 года назад

I didnt get what you mean. can you explain more?

@samuelaraujo9099 Год назад

@@umnajdi basically, when you define a function like () => yourAnotherFunctionCall() inside a props, you are creating a new ref, so everytime parent component rerender the reference will be different, so child component will rerender

@serenestrolls-d7b Год назад

@Mayank Ramina Dont create inline functions. Create named functions and use useCallback hooks to memoize them.

@billyfigueroa1617 11 месяцев назад

Great video!!! I’ll be using this for work. Hopefully we are on the right version so the profiler shows up

@nxshipon6470 2 года назад

Josss sir Thanks YOU

@jamesfoo8999 3 года назад

Thanks :) The text documentation just wasn't sinking in.

@kidShibuya 4 года назад

Super confusing because that action took 154ms but everything in the profiler says less than 3ms?... The CocktailBrowser says it took just .7ms?...

@kirillzlobin7135 7 месяцев назад

Profiler is apparantly very useful thing

@HaibertBuilds 3 года назад

You should make the same video for react native!

@ShumiGupta 4 года назад

Can you provide the chrome extension you used to get react in developer console tab? I used react developer tool extension using which I am not able to get total number of times component renders.

@bawad 4 года назад

Make sure you have the latest version of react

@ShumiGupta 4 года назад

@@bawad thanks for the reply. Yes I have latest version of react and react developer tool but it looks like they have made some changes in recent version now they are not showing the number of times component got rendered. I haven't got chance to check the change log will check and if I found something I will post the reason here. If you got to know something about this please share it with me.

@ShumiGupta 4 года назад

They have made multiple changes to optimize performance. So I would recommend all to review change log as they have mentioned all the changes made.

@DrNoxer 4 года назад

When you pass callbacks or raw objects to the components and you're doing it directly on it: blabla={() => ...} or blabla={{ ... }}, those fail the comparison check of react, since objects and functions get a new address and the JS comparision compares the addresses, making: {a: 10} == {a: 10} be false, therefore, for raw objects you should useMemo() and for raw callbacks, useCallback()

@christiangyaban9666 5 лет назад

nice one

@shirshak6738 5 лет назад

nice :) Seems like everybody should use at least to get insight how performant their app is running.

@zoladkow Год назад

granted, this vid is about a workflow with profiler, but the most prelevant message i think gets across is to just throw more memo here and there 🤷😁

@jamesherrero7334 4 года назад

@5:53 you uses a short cut to delete only that one word, how???

@bawad 4 года назад

dt) benawad.com/vim

@vishaljain8868 3 года назад

fn+option+delete

@EverAfterBreak2 3 года назад

ctrl + delete in windows

@mohammadalioruji4025 3 года назад

cooool

@arvindvs8934 3 года назад

Is the app in this video using Material UI?

@w1pe0ut 3 года назад

Yes ,it is. (Material UI for React, of course)

@popuguytheparrot 5 лет назад

why are you using HOC withStyles if in v4 add useStyles hook

@Deliverant 5 лет назад

It's not his application i presume

@bawad 5 лет назад

Yep

@popuguytheparrot 5 лет назад

@@bawad can you do video about effector.js ?

@bawad 5 лет назад

at some point yes

@MikeyHogarth 5 лет назад

It's my app (hi Ben - I nearly had kittens when I saw this vid) - easy answer to this is that v4 wasn't out when I started, it came out mid-project - plus I'm not in the habit of just hookifying everything just because there's an API for it, sometimes it's advantageous to use HoC's.