Custom hooks in react | currency Project

In this comprehensive tutorial, you'll dive deep into mastering React by building a currency converter project. This project not only enhances your understanding of custom hooks but also demonstrates the importance of component reusability in React. The tutorial begins with setting up the project using Tailwind CSS for styling, followed by designing input components that can be reused efficiently. You'll learn how to create your own custom hooks to handle API requests, ensuring that the app remains scalable and easy to manage. The tutorial also covers state management and how to handle form submissions in React, emphasizing best practices like using useState and useEffect hooks. Additionally, you'll explore advanced topics like generating unique IDs using useId and handling asynchronous operations with fetch. By the end of this tutorial, you'll have a solid understanding of creating React components that are not only functional but also highly reusable, giving you the confidence to build more complex React applications in the future. Perfect for those looking to bolster their React skills and add a robust project to their portfolio.
Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...

[@vedantdeshpande2723]

Really thank you this is one of the best react series I have watched and really appreciate your hard work man

[@Roshan-fy5rk]

you are teaching exactly the way everyone wants to be taught. Appreciate your effort a ton . your youtube tutorials are our poor students best go to while cant pay extra for any course than our college. God bless you for that Brother.😇😇

[@ItsjustStarFoxNBD]

Hitesh your videos are incredible. Thank you so much!

[@utkarshgb27]

Thank you so much, Hitesh Choudhary sir, for the incredible React tutorial! It's by far the best one I've seen on KZbin and has made my React journey so much easier. I’m starting to believe that I can truly learn React thanks to your guidance!

[@kattamurinagabhushan9879]

i just love to watch your tutorials. Learning a lot of courses from you. Thankyou for your efforts.

[@jessekM10]

Hello Hitesh I just want to thank you for this series coz it has helped me alot

[@lcandao8660]

I'm nearing the end of the current videos in this series and I'm extremely satisfied with the explanations. Keep up the great content.

[@awnishprasad9367]

from where i get those api

[@akashmatsagar9970]

My friend purchased a course at just 200 rupees cost react course and now he at 12 lpa ..& this is the power of learning quality at this amount in this costful world.i also purchased

[@HrissW]

Fr? Is it his first job?

[@akashmatsagar9970]

Yes his starting actually half of above but within six months he is at above in same company@@HrissW

[@_sarthakmisal]

Naah bruh ​@@HrissW

[@Nomadic_picxoman]

Course link

[@rakteemmullick2908]

thank you very much sir for such an amazing tutorial. Especially the concept of hooks got much more clearer to me.

[@sharathkumar726]

You are amazing teaching skills with great attitude....👍

[@ritwikyadav9749]

Thanks Hitesh for these videos, this is one of the best into to react series I have watched. Like it when you explain a lot of other simple concepts like fetch vs axios etc which helps us revise JS as well.

[@christophermawela3318]

Thanks Sir, this tutorial has been hard but you explanations made it easier. I will revise this session after finishing the entire series, once I'm comfortable with creating simpler React projects, I will buy your complete course, I'm now moving to the next tutorial. React Router

[@brunohenrard]

Thank you for these high quality videos, I'm watching them and then trying to make the app on my own. It looks easy when you are doing it but much more difficult while being alone :-).

[@saimanu1997]

Thank you so much Hitesh, as usual your teaching is top notch.

[@Donald.L.Rosenberg]

Hitesh your videos are incredible. Thank you so much!

[@Adventures_English]

Another great video. Thanks again! You are a great teacher!

[@zues8150]

Great Project Sir even i have completed more complex project on react but this one was just perfect that's it 🔥

[@loudcapricorn5513]

This was a really great video providing deep learning which is actually asked in interviews. Thank you for this wonderful content

[@erbhargavvyas]

Thanks for the Awesome tutorial.

[@pawankand]

Very much clear about custom hook in react post watching this video. Thanks Hitesh for great video and am sure this series will be super exciting with upcoming videos :-)

[@ravisankarp61]

​Thank you so much, this video has helped a lot and I have learned a lot .Will watch more videos on ur channel.

[@ErsanGökalp]

You give me so much positive energy. Blieve me, this has equal important to information itself

[@devaprem7777]

IT HELPS ME A LOT TO GO THOUGHT THE CONCEPTS BRO... THANKS A LOT

[@iBounty12]

really good project with lot to learn from it, thanks

[@mahendrarajput2870]

thank brother for sharing content.

[@manjuhakki5635]

Nice video. Keep doing it consistently.

[@divinendubuisi9593]

thank you for the project, a lot was learned. I really appreciate

[@aimenazim1508]

Well, I must say I learn quite a lot, I was scared of custom hooks I never touched I but I'm confident now.

[@aniket7390]

Completed the project with tsx, found one issue with swapping values but thanks to comment section i was able to figure it out quickly. Thank you so much hitesh

[@sandeepanmazumdar8486]

did you face issue while fetching the data from api? if not, can you please help?

[@PranayAcharya-qz6tf]

@@sandeepanmazumdar8486 bro, is your problem solved. if yes please help me out iam also facing issue while fetching the data its showing a message of unable to fetch

[@manipalreddy3378]

@@sandeepanmazumdar8486 i am facing the same issue bro, did you resolved it?

[@vedangop4918]

@@sandeepanmazumdar8486 did u resolve it coz i did too!!

[@ChetnaAglawe]

Thank you so much ,great learning video, help a lot.

[@Ronieyit]

best of the best. thanks Mr. Hitesh

[@morecoinbull]

thanks for making these. they are really helpful!!

[@hajsdusau]

Great Video Hitesh!

[@dolfieaspeling9893]

Another banger , keep them coming :)

[@ChandanSahu-ub8mp]

Really helpful video. Loved it❤

[@souvikdas_01]

Thank you sir for such an amazing react content.

[@purvesh62]

Thank you for another informative video.

[@prasadpatil2371]

Absolutely enjoyed the latest video! Gained some valuable knowledge-thanks a bunch!

[@Adventures_English]

If you can't figure out why the values are not swapping consider this from MDN: TYPE The type of the button. Possible values are: SUBMIT: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value. RESET: The button resets all the controls to their initial values. BUTTON: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

[@youtubecodinggithub6145]

I really don't comment to any video i am not that person but seriously saying you are a gem and i love the content from kerala 😍

[@achuthanboovaragan3546]

Learnt about custom hooks clearly. Thank you!!

[@NikhilGupta-qn8jl]

Thanks for amazing content.

[@mohammad-ravoof]

Thanks alot hitesh.

[@subuhifarooqui5165]

Thanks 🙏🙏🙏🙏

[@rishabhraj1208]

great explanation

[@ThotaSrinath]

Thank you so much Bro.

[@olukayodepaul7070]

nice work. pls what is the name of the plugin you said you install that help you design faster?

[@shreeshiva4341]

Great video, thankyou

[@003_abhishekdubey4]

Great Sir

[@SUGANTHT-t9y]

thank u its very useful!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@pradeep6635]

thank you❣

[@sankalpgupta8917]

sir really like your theme #chaiTheme

[@akashmatsagar9970]

Thank you

[@erbhargavvyas]

Why to use ? We could have just button and the onlcick event on that button when we do not want to actully submit. Any explaination, that why people (I have seen at many places) uses the and then use the prevent default, would be appriciated.

[@Zara.Khurram]

Thank you for creating such great content. I am trying to learn coding by watching your videos. Quick question: I followed all the steps but in the currency converter I made I am unable to change the input Amount. what can I do to solve it? I will really appreciate your help.

[@anthonynnawulezi7400]

Please i want to know what plugin do you use to suggest codes I kind of like it

[@_sarthakmisal]

Hitesh bhai Chai aur code pe aapne direct code likha hai toh samza nahi issi liye yaha aaya hu Hope that won't get disappointed this time

[@prasantht.k8345]

Thank you sir

[@thearmanahmed_]

thanks hitesh

[@saisashreek9249]

Hey hitesh curency converter API link failed.

[@rdakash-1108]

Thanks for the informative project Hitesh. I faced one problem which is, the To values remains while swapping. After hours of debugging found that the problem is in convert function. The value actually got swapped for a split second after which Convert function runs again with the updated amount but with old currencyInfo. Please comment if someone fixed this :) Edit: Having convert function on onClick event of convert button instead of form's onSubmit fixed it.

[@MonishaBaskaraRao]

Thanks a lot! Saved time!

[@lcandao8660]

After hours of looking as well, I finally figured out what was causing the issue. Since this is all happening in a we define the type for our 'Convert' button as "submit". We never set a type for our 'Swap' button and so it takes it by default as a form submit. By setting the type="button" for my 'Swap button, I'm able to successfully swap the amounts.

[@akashsaxena7339]

@@lcandao8660 can you tell the steps you used to debug this

[@mattakalyan1427]

Thanks a lot

[@deadlylive_gaming7154]

thanks🎉

[@barnamoydhar4507]

Love you hiteshsir

[@AashutoshSingh-xq7gy]

Thank you very much sir

[@huletech]

hey hitesh can you make tutorial on how to use react js with postgresql

[@HiteshCodeLab]

How to use reactjs with postgresql ?

[@huletech]

I watched the video thank you for your response sir

[@erbhargavvyas]

The useId will resolve the issue two developer giving same name for two different things specially in larg scal project where multiple developers are working on components that will appear on a same screen.

[@MILDTALK]

Hi Hitesh, I have a doubt like you have swapped from and to value without using any third variable. So my question is 1. setFrom(to) 2. setTo(from) As soon as line 1 runs, its value is changed . How does it preserve its previous value? How is it working?? Any concept I am missing ? Pls suggest me.

[@lcandao8660]

From my understanding, he explained this in his video "Why you need hooks and project", using the counter project. In react, when you call a function, if you want it to change the value in real time, you must use a callback that forces it to wait for the value change. Otherwise, it does batch operations and applies the changes at the end of the function call. In this case, since it's a batch operation, setFrom() and setTo() don't have their values changed until the end, in which case they're effectively swapped. This is my understanding from studying his videos, I hope it helps!

[@tGoldenPhoenix]

❤❤❤

[@anthonynnawulezi7400]

thank you for this

[@saikalyan-v3c]

Thanks

[@ameertheeink]

Thankyou

[@prashanthkumar7610]

Thank you so much

[@SecondId-x9p]

thank u sir

[@deepeshpakhare]

Thanks for another great video. Learnt a lot. Can we now delve into testing react components with you ?

[@SadhviKesarwani]

can you send me API link

[@himanshusingh7636]

❤❤❤❤

[@anandj3616]

please do javascript series in english too

[@manoyal]

The only thing left that I want to understand is to be able to use the useReducer hook, together with useEffect hook to do state management without relying on external libraries like Redux

[@lionfamily9374]

Thank you

[@mrinalbera6080]

Hello sir, pranam. Sir I want to do your node js backend course from learn code from me website is that course sufficient for backend learning? In ineuron it's same topics videos but price is much high why sir? If you cleary doubt it will very grateful ❤

[@thummanapallishivakumar6590]

❤‍🔥

[@akashrathod2285]

where i can get this project code?

[@marisankarm58]

I learned a lot in this video

[@OOO-CM-DVinay]

hey bro i have used the url provided by you in github but still the the url is not working i am not getting any type of data from the url

[@kevinbiwott9301]

Thanks

[@ruxisama7473]

Thanks

[@kjorator]

thanku

[@shyamnarayananj4480]

Objects are not valid as a React child (found: object with keys {label, amount, currencyOptions, onCurrencyChange, onAmountChange, selectedCurrency}). If you meant to render a collection of children, use an array instead struck by an error while running this program. Someone plz correct me..

[@juanmacias5922]

51:20 somehow my swap function isn't setting the correct setConvertedAmount(amount), just stays as the old convertedAmount. xD even tried using temp values, I'm just going to walk away for now lol thanks for the video!

[@dhruvcharkhawala7509]

yes mine also ping here if you find the solution

[@amritajain9664]

Gained some valuable knowledge

[@kazitanim007]

This currency api link is not valid anymore, please update.

[@salmanfarshisajib6512]

❤👍

[@tanyamaurya9626]

Hello sir, I’ve been trying to access this course of Mern stack on your site but somehow it’s showing sorry for the inconvenience, contact admin.. I’ve already bought this course 2 months back. Could you please let us know by when the issue will be resolved?

[@awnishprasad9367]

from where i get those api

[@GiorgiKhvedelidze-j2e]

👍

[@NitishJain-ww2fv]

hey hitesh, the "To" value is not getting updated with Swap function. I tried saving the values in const befor setting in "setXXXX" but no luck. The Fetch API call is happening twice on page load. I tried to debug a lot but couldn't able to found the reason. Any suggestion?

[@lcandao8660]

After hours of looking as well, I finally figured out what was causing the issue. Since this is all happening in a we define the type for our 'Convert' button as "submit". We never set a type for our 'Swap' button and so it takes it by default as a form submit. By setting the type="button" for my 'Swap button, I'm able to successfully swap the amounts. Hope this helps.

[@Adventures_English]

@@lcandao8660 Thanks so much for putting the time in to figure this out. That isn't an obvious solution to me at this point. Mind sharing how you figured it out?

[@Adventures_English]

@@lcandao8660 FROM MDN type The type of the button. Possible values are: submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value. reset: The button resets all the controls to their initial values. button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

[@lcandao8660]

I haven't looked at the code in several weeks, but I can go through my thought process from what I recall. I debugged the problem with several breakpoints within the swap function call. I looked at the value going in and what would come out. I noticed when slowed down, the function call would effectively swap but immediately swap again. This would cause my "To" and "From" values to be identical. After a while of staring at code, I noticed there was no type assigned to the "Swap" button. but there is a type assigned to "Convert" button. Then I started to experiment with eliminating the form template and just running the buttons alone. This didn't work, so the last thought I had was "what if this button is submitting the form?". That is when I input the type and it solved my problem@@Adventures_English

[@WriterMackey]

Where the link to github, Where can i trace it? Very urgent

[@madhummh77]

❤

[@JyotiYadav-o3l]

How to run this project ?

[@sharathkumar726]

🥶