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 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.
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.
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()?
@@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
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 UA-camr, much abundance quality & humor
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()
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 .
This was great!!!!! More guidance on the tools!!!!!! Please 😁
great video, thanks a lot
Excelente vídeo, me ajudou demais!
Is there any special setting for render count ? I don't see the count in my profiler.
Josss sir Thanks YOU
Thanks :) The text documentation just wasn't sinking in.
Hi Ben. Thanks for this very informative video. What’s the name of cocktail app you are optimizing in this video?
1:41
that's what she said.
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.
Make sure you have the latest version of react
@@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.
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.
@5:53 you uses a short cut to delete only that one word, how???
dt)
benawad.com/vim
fn+option+delete
ctrl + delete in windows
why are you using HOC withStyles if in v4 add useStyles hook
It's not his application i presume
Yep
@@bawad can you do video about effector.js ?
at some point yes
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.
best video about react profiler for now. nice and simple. thank you!
Super confusing because that action took 154ms but everything in the profiler says less than 3ms?... The CocktailBrowser says it took just .7ms?...
This is not useful anymore as there is no "total render" count in react dev tools
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.
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()?
good point
I didnt get what you mean. can you explain more?
@@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
@Mayank Ramina Dont create inline functions. Create named functions and use useCallback hooks to memoize them.
Great video!!! I’ll be using this for work. Hopefully we are on the right version so the profiler shows up
Thank you, Ben. The best video explanation for profiler in react.
how to use the lazy loading as you mentioned?
This is really one of those which everyone wants to know about but don't know where to start. Thanks for this video. 👍
Profiler is apparantly very useful thing
Great rundown. Thanks!
This was awesome! I'd really love to see how you structure your React app to scale. Please do a video on that 🙏.
Are you talking about folder structure?
@@bawad Yes. Folder structure; where you decide put things like components, contexts, tests, and how they all come together.
ua-cam.com/video/M4rYfq5foPA/v-deo.html
this is a great question
@@blyfo I second that
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 🤷😁
Thanks Sir!
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 UA-camr, much abundance quality & humor
How do you get the extra information for components about total renders, props etc.? It seems the default setup doesn't provide that information.
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
Is there a tutorial video for the cocktail app shown in this video? Can someone please guide
You should make the same video for react native!
Thanks for this! Really helpful.
Is the Profiler API from docs and Profiler Tab in Dev Tools same.
awesome, thanks
Outstanding.. this is what I expected 😊
thank you! very well explained
Awesome Video with superb explanation.
very helpful and packed with only needed info
Thanks man. This is really good one
Best content on your channel..keep it coming
Very useful, thanks.
Hey Ben..Great video as usual. A small request for video for optimization of javascript app, react app, code splitting.
Video volume is very low.
Cool video thanks!
excellent! thanks man
Fantastic performance guide, many thanks!
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()
Great inputs sir!
cooool
Thanks
Great video. Really helpful. Thanks a lot
Is the app in this video using Material UI?
Yes ,it is. (Material UI for React, of course)
nice :) Seems like everybody should use at least to get insight how performant their app is running.
nice one