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

[@shivroy652]

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 .

[@IvanLeshchenko-q1w]

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

[@samartajshaikh2601]

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

[@jguix]

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.

[@ShawnRice-eg3il]

Great rundown. Thanks!

[@TuanNguyen-vk4fu]

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

[@VerySadBatman]

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

[@bawad]

Are you talking about folder structure?

[@VerySadBatman]

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

[@bawad]

kzbin.info/www/bejne/g2XVipmnasuihqM

[@blyfo]

this is a great question

[@md.mashnoorsaifkarim3453]

@@blyfo I second that

[@tyrrelldavis9919]

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 KZbinr, much abundance quality & humor

[@markhyoutube]

Fantastic performance guide, many thanks!

[@kirillzlobin7135]

Profiler is apparantly very useful thing

[@beeenthere]

Thanks for this! Really helpful.

[@pawanmittal6166]

Awesome Video with superb explanation.

[@kidShibuya]

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

[@cebuch.]

very helpful and packed with only needed info

[@vinayadiga1674]

Thanks Sir!

[@sushmitakumari8252]

Outstanding.. this is what I expected 😊

[@luanecarolineaquinocavalca1064]

thank you! very well explained

[@yusf1945]

Thanks man. This is really good one

[@cubiq1]

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]

good point

[@umnajdi]

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]

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

[@Jrrs2007]

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

[@nbaua3454]

Best content on your channel..keep it coming

[@TheOrlstefano]

Great video. Really helpful. Thanks a lot

[@deepwebtube]

Great inputs sir!

[@aqua123670]

awesome, thanks

[@HOLONIA4EVER]

Very useful, thanks.

[@tegaogheneovo5881]

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

[@punisher013]

excellent! thanks man

[@petrosc7608]

great video, thanks a lot

[@victorfigueiredo6031]

Excelente vídeo, me ajudou demais!

[@jivkojelev3744]

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

[@DrNoxer]

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()

[@cristiantorres853]

how to use the lazy loading as you mentioned?

[@segevitsky]

Cool video thanks!

[@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 🤷😁

[@ankitmehrotra8519]

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

[@nxshipon6470]

Josss sir Thanks YOU

[@cryptonative]

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

[@rhidlor8577]

Thanks

[@jamesfoo8999]

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

[@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.

[@HaibertBuilds]

You should make the same video for react native!

[@ShumiGupta]

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]

Make sure you have the latest version of react

[@ShumiGupta]

@@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]

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.

[@shirshak6738]

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

[@arvindvs8934]

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

[@neeraj1bh]

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

[@gabrielloubier8662]

This is not useful anymore as there is no "total render" count in react dev tools

[@mohammadalioruji4025]

cooool

[@christiangyaban9666]

nice one

[@jamesherrero7334]

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

[@bawad]

dt) benawad.com/vim

[@vishaljain8868]

fn+option+delete

[@EverAfterBreak2]

ctrl + delete in windows

[@TheNishant30]

1:41 that's what she said.

[@arvindvs8934]

Is the app in this video using Material UI?

[@w1pe0ut]

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

[@hiteshagja24]

Video volume is very low.

[@popuguytheparrot]

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

[@Deliverant]

It's not his application i presume

[@bawad]

Yep

[@popuguytheparrot]

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

[@bawad]

at some point yes

[@MikeyHogarth]

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.