The Most Creative NPM Package I've Seen

Josh is the tool you are going to show me in this video extremely useful no Josh is the tool you're going to show me in this video fundamentally going to change the performance of my react apps and make my users happy cuz now my site is so fast well no hell no I'm not going to overpromise anything here dude but it's easily one of the most creative uses of a super nice react API that I have ever seen so just imagine this you just publish your website damn that feels good finally the work is done users are able to see your website on the internet but then well damn seems like you somehow messed up the performance once again so what do you do option A you spam use memo everywhere and hope that fixes things option b you do the exact same with use callback and hope that fixes things or option three you use the tool that I'm going to show you right now and turns out a lot of people already do okay dude so react Geer is a tool for aiying react performance issues you can have it running in the background and it makes little clicks which will Point your attention to excessive slow component rerenders and as I mentioned it's getting pretty popular and the setup is incredibly easy let me show you how to do this we import from the MPN package and then literally W or app inside of the Geer component now that's it we can still pass a custom render time threshold though so for example let's set this to zero so it'll be very easy to tell how the renders behave in our app so I'm going to do this for you okay I'm going to hover over this thing and this is going to be really loud I'm going to probably tone it down in the video let me just show you how this works when we hover over oh God this is so Lou when when we hover over this it's going to start playing a very loud very annoying noise like a Giger counter oh god dude um so we can tell how the component reenders and that it's pretty slow now in reality of course you wouldn't set this to zero right 0o millisecond render time is pretty solid normally like 50 maybe 25 if you're very performance oriented I guess and the thing is this is not the first time something like this is being put into the world there was some other people that did something similar there is a guer Malo implementation whatever that means to discussed here previously so it's not the first time somebody came up with this idea but I do think this is the first time anyone really uses a package like this what's much more interesting is how this actually works under the hood so I did some digging for us to see how this works and it's actually really straightforward so it builds on top of a native react API that we all get access to we all can use already in our app which is the profiler now this profiler if you're wondering where this comes from this literally comes and I can zoom in so you can see this a bit easier this literally comes straight from react at the very top right here the profiler so this is a native react API and it takes an on render function and whenever your app renders and you wrapped your entire app inside of it or a specific component if that's what you want a performance test and this on render that is passed in will actually give you access right here in the handle render to the duration it took for this specific render for the component to occur and all we're changing by passing in this custom render time threshold right here is when the audio should start playing when it should start alerting us of our radioactively bad react components here so if the actual time it took for this component to render is larger than the threshold like 25 milliseconds that we set in that case either if you def find a custom MP3 file that should be played which you can totally do now if it's a good idea you know I'm not going to be the judge but you can um but in most cases you're going to be fine with the actual gagger sound that's already annoying enough let's be real here and then it's just going to play that file at a certain amplitude that you can set there's a bunch of other options we can take a look at but they're not too important like the enabled oh okay this one is pretty important like the enabled for example we can set it to true or false please don't use this in production don't never very very bad idea not only because it'll annoy the absolute out of your users but also because this actually brings a performance overhead um it says right here in the caveats profiling adds some additional overhead so it is disabled in the production build by default so please don't pass the enabled true right here because that's going to activate in production to opt into production profiling you need to enable a special production build with profiling enabled again very very bad idea and there's some other options like uh let's take a look at them phase option profile or ID you rarely want to change this and then most important one of course the threshold if you want to do some serious performance testing the profiler is actually really useful so just architecturally how this kind of looks in our app we built on top of the very simple profiler and the only addition that the react Geer package makes for us is well it checks the time it took to render and if it took above the third threshold then it plays the um MP3 file that's literally all it does but dude this must be one of the most creative uses of the react profiler I've ever seen so you like the tool you don't like the tool U I'm not going to use it listen I'll be real with you here I'm not going to use it in my apps ain't no way I always want that noise inside of my headphones but it's it's a really creative idea and I think we can all appreciate that so let me know your thoughts down below I really hope you enjoyed this video and I'm going to see you in the next one until then have a good one and bye-bye

Channel: Josh tried coding

Views: 27,234

Keywords: react, performance, nextjs, profiler, react performance, react rerender, react increase performance, nextjs performance, react geiger, josh tried coding, joshtriedcoding

Id: XMlzAFzWpqM

Length: 5min 38sec (338 seconds)

Published: Sat Mar 16 2024