Next.js 14+ Debugging - Debug React Hooks with best Library use-what-changed

hi guys welcome back to another very important video on react and next gs14 I'm going to be talking about debugging I've already created videos on how we can configure break points and use it to debug our react or nexts application in this video I'm going to be showing you an awesome library that helps us debug the hooks whether it's built-in hooks or the custom hooks let's say that we have hooks that have a dependency array and we need to configure and figure out that which value from the dependency AR got changed what was the old value what was the new value and it's very hard to analyze and time taking to debug these kinds of things using console log statements or the breakpoints so the library I'm going to be using is this one use what changed it is an awesome Library I'm going to be showing you how we can configure it install it and use it in multiple react hooks so let's go ahead I've already created a new nextjs project nextjs 14 and currently it is showing nothing nothing because I've not added anything so first of all I'm going to be showing you an example to debug a use effect hook so I will be creating a new component so let's create a new folder first of all and inside it I'm going to be creating a new component so let's say use effect hook. TSX all right so I'm going to be creating this one and uh first of all I will be importing that hook so use a effect and also I will be needing use State hook and in nextjs as you already know I've already created almost 50 videos on my channel on nextjs if you want to learn nextjs you can check out my channel and you can find videos on pretty much every topic on nextjs 14 and nextjs 13 so here I will be giving it Ed client because I'm using HX without converting use client it will throw an error that you cannot use HX in the server components in nextjs so first of all I will be creating couple of variables using use State hook so first of all this is going to be the count let's add the set count here use State and initial value is going to be zero let's add another variable let's say the name set name use State and let's give my name to it after that I'm going to be using use effect hook and and uh this is going to have this kind of syntax let's give it the count and the name inside the dependency array okay and inside this use effect I'm going to be adding effect triggered by changes in count or name so first of all inside this div let's add H1 and uh hello and I'm going to be adding and printing the value Val of this name and after that I will be creating an input this is going to change the value of this name so this is going to have this Tailwind CSS Styles um and then this value and on change is going to take this particular function so let me add this function Above This return statement and below this I'm going to be adding an other H1 and this is going to be the count and let's print the value of this count let's give some Tailwind CSS classes to it by adding the margin top to six okay so below H1 I will be creating another button let's give it a class background is going to be the black text is going to be white margin top two and the padding two okay so inside this button let's give it an increment and then I'm going to be adding an onclick event to it so this is going to be set count count + one all right so let's see what we have here if I refresh actually I need to add this component in my page. TSX so here inside this main I will be first adding this uh H1 and let's give it use effect hook to see that we are actually testing the use effect hook so let's give it text large font bold and below this I will be adding this particular component so let me change it with the capital u here and also here okay and here I will be adding use effect hook this will be automatically imported and like this now if I go so this is the UI it has printed now if I change the value like this you can see that it has printed this message and if I click on the increment it's again going to print the same message we can print the values of it by adding it over here but it's not convenient when we have a lot of uh variables over here and currently these are the Primitive types we can have the arrays we can have objects we can have a lot of other values over here so now it's time to install that particular package and show you that what is the benefit of that how convenient is that to debug this particular hook and inside this terminal I'm going to be installing npm install and uh let me open up this particular package and I'm going to be actually I need to copy this thing okay make sure you install it in dep dependency because we only want it while we are developing all right so this is going to gets installed I'm going to be importing it at the top so let's import that so use what changed from at this particular package okay now below this particular variables actually above use effect hook I will be using this hook use what changed and inside it I need to add the dependency variables so we have two dependency variables like this and then uh after this I can have the name of those columns which needs to be added all right so now let's save this file and I'm going to run my project npm runev now in the browser if I refresh this page it's going to show up something you can see that it's showing it in the form of table it's showing two variables which are the dependency variables added over here which are equal to the dependency variable of the use effect hook and here it's showing the old value new Value Old value new value now if I try to change the value over here you can see that every time that dependencies gets changed and use effect Hook is going to gets triggered it's showing what was the old value and what is the new value and which variable got changed in the dependency array and the name variable got changed count did not got changed if I click on the increment now you can see that here now it's showing that the name did not got changed and uh this is the new value this is the old value for the count variable if I keep on clicking on it uh you can see that it's showing old and new value so it is really beneficial whenever I try to debug these particular hooks whether it's use effect use memo use call back custom HX this Library really helps me to debug what are the values coming in and uh how we can fix that particular is issue so let me quickly show you that this particular Library can be used with all other react hooks in NEX gs14 as well as well as the custom hooks so quickly I'm going to be creating couple of more files so first of all I will be creating this one call back hook. TSX let me create that RFC call back hook so inside it first of all I will be importing it at the top use client because we are using Hooks and this is what I have imported and then I'm going to add one variable using use State and then I will be creating another function using use callback as you already know that this particular Hook is used to remember a particular value within the function so I'm going to be calling this function from within this return statement below all right so this is going to have this number title this this is going to call this particular function calling this increment and just like this one I'm just going to copy this use what changed and I'm going to paste it over here and here I will be adding a number let me remove this let me add the title to this table all right so this is something which I need to add over here let me add it like this and let me add one margin at the top margin four let's say and use call back hook and here I need to import that particular hook call back hook all right so let me add this this one has been added all right so here you can see that this has been added and uh here uh it's showing this particular number and it's also showing this particular object as well with new value and the old value if I click on the increment you can see that it's showing this part particular number old value new value and it means that we can use this library in this hook as well we can use it in use memo hook with the complex calculation as well so let me quickly Show You by creating that so I'm going to add memo hook. TSX so inside it let me add this one okay and at the top just like the other files I will be adding these particular import statements and I will be adding this particular State variable and in order to use use memo we need to have complex calculation as you know that this particular Hook is used to improve the performance of our app okay and uh it's only going to trigger this particular logic when the value gets changed inside the input value the different value comes in this particular dependency value now inside this particular Dev it's going to have a button and actually the input so this is going to be of type number and this on change is going to change the value of this state variable and when this value is going to gets changed this dependency value it's going to gets updated and this function is going to gets called okay so here I'm going to come here and I'm going to copy this particular thing and uh let's add you memo here so that we know the difference and here I'm going to add memo hook it's going to get imported now in the UI Let me refresh this page uh you can see that we can click on it and showing the result but inside this console log actually I think I have not added this thing use what changed so let me add that above this particular function with the same value of the dependency see array okay now let's refresh and here you can see that input value old value and the new value let me change it and here you can see that old value new value object with the values of new value and the old value so the reason I have shown it in three different examples because I wanted to show you we can use this particular library in all the hooks provided by react whether it's nextjs 14 or react and also so if you have built the custom hook then even in that particular hook we can use this particular Library so I hope that you have got an idea how we can use it configure it install it in our project whenever you come across any problem variable change uh or you want to debug your code within any kind of Hox you can use this Library anywhere in any component thank you so much for watching guys see you in the next video don't forget to subscribe my channel

Channel: Programming with Umair

Views: 951

Keywords: next.js debugging, debug react hooks, break points in vscode, useWhatChanged for react hooks, react hooks debug media, react, javascript, web development, debug next.js hooks, @simbathesailor/use-what-changed, how to debug react hooks, how to debug next.js in vscode, debug react components hooks

Id: Y5Ii8zXPPys

Length: 12min 56sec (776 seconds)

Published: Mon Jan 08 2024