Build useFetch Custom React Hook to Fetch Data in 20 Minutes

No video

Build useFetch Custom React Hook to Fetch Data in 20 Minutes

Рет қаралды 21,586

Күн бұрын

In this video we will build a powerful Custom React Hook useFetch() that will help us to fetch the data from server along with that it will provide us different API request states like data, loading, fetching, error which we can use throughout our application.
We will use Axios for making API request, useReducer for managing the local state of the hook and useEffect for running the API request sideeffect.
🔥 Relevel by Unacademy👇
It is India's first platform to help all aspirants have access to their dream job. By taking the Relevel Test, they engage in comprehensive skill assessments, which evaluate industry relevant skills and their job-readiness.
Platform link - relvl.co/93nn
Leaderboard- relevel.com/le...
Business Development: bit.ly/3AyFU5r
Backend Development: bit.ly/3uZsjmj
Frontend Development: bit.ly/3DksJGJ
⭐️GitHub link for Reference⭐️
github.com/dma...
⭐️ Support my channel⭐️
www.buymeacoff...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React Fundamentals Project - • Learn React JS Fundame...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
**More videos**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my Crash courses for get started with web development**
JavaScript Tutorial For Beginners - • JavaScript Tutorial fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- Build useFetch React Hook
- Data Fetching using React Hook useFetch
- Making a Custom Hook - useFetch
- Learn React Custom Hook - useFetch
⭐️ Hashtags ⭐️
#react #custom #hooks #beginners #tutorial #dipeshmalvia
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

Пікірлер: 34

@DipeshMalvia 2 жыл бұрын

Guys, if the video is helpful to you or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

@RanaAhmed-gr4ub 2 жыл бұрын

keep going brother. your react code so clean.

@DipeshMalvia 2 жыл бұрын

Appreciated

@codedusting 9 ай бұрын

Great. I'll extend it a little bit more for handling graphql calls with InMemory cache.

@abdullahclementabdulshekur6736 Жыл бұрын

Very good way of implement network request in ReactJs, could you make a video with post method. I like the level of abstraction

@arnabchakraborty3595 2 жыл бұрын

sir mujhe english achee tara nahin ati .but apka video dekha kar mujhe achaa lagta hin maine react ka fundamental advanced sab apke video sahin sika hoo ..but kuch dino se apka video nahinn araha hain to thora video lekar aye koi naya project lekar react kar ...intezar main hoon apke video ka

@DipeshMalvia 2 жыл бұрын

New video aa gya bhai..

@arnabchakraborty3595 2 жыл бұрын

@@DipeshMalvia thanku sir

@gastonartazayanez3730 2 жыл бұрын

Thanks for all your content It is really helpfull for me. ✌

@DipeshMalvia 2 жыл бұрын

Glad to hear that

@sachinkotian2829 2 жыл бұрын

So if we have custom hooks then why to use high order component?

@user-ht9eh7ex4v Жыл бұрын

Thank you for this beautiful video

@DipeshMalvia Жыл бұрын

Thank you too

@sonamohialdin3376 Жыл бұрын

Awesome tutorial thank you

@DipeshMalvia Жыл бұрын

Welcome😊

@subhashgn1775 2 жыл бұрын

Very Well explained.👌 Thank you🤝 How to handle multiple API calls in single component?

@ShaikhAhmedReza786 2 жыл бұрын

Awesome. Really appreciate it. Got to know a new thing.

@Pareshbpatel Жыл бұрын

Nice illustration of creating a custom hook to fetch data. Thanks, Dipesh {2022-10-14}

@pateljay5351 2 жыл бұрын

Hi Dipesh, please tell me which one is better for state management 1) context api 2) redux 3) recoil

@evangel.constantine 2 жыл бұрын

It depends! For simple state management, context and recoil are suitable. For more complex state management go with Redux or Redux toolkit

@91navii 2 жыл бұрын

kickass stuff...

@alexon2010 Жыл бұрын

I've seen several videos about api hooks, the problem is that I don't want to load when starting the screen, in the example when starting the app it triggers the useFetch, I want to do this when I click on the button, onClick, I can't do it?

@bhagabatsahoo3112 2 жыл бұрын

Very good

@DipeshMalvia 2 жыл бұрын

Thanks

@mariusgardelli4262 2 жыл бұрын

I really like combining useReducer and useEffect when I need to fetch data, but using the same code over and over again was getting way too repetitive. Sadly, for some reason this doesn't work with the tmdb api. I can't access my data from useFetch in the App component, all I get is an empty array. Weirdly enough, the console.log(payload) from useFetch displays the data.

@fitnesspriority 2 жыл бұрын

Please use arrow functions for defining func comp :)

@DipeshMalvia 2 жыл бұрын

Thanks for the tip!

@Olatee 2 жыл бұрын

This is a good video. Unfortunately the part where it's suppose to display an error if there's a problem with the request doesn't work. I changed the error object from null to Boolean to make it work. I don't know if it's the best option.

@clikhamitsolutions 2 жыл бұрын

yes, go the same issue as well. and it doesn't work with POST only works with GET

@kristijanblazevic7141 2 жыл бұрын

#likedbeforewatching 😄🔥

@aryaadinulfadlan8998 2 жыл бұрын

thanks bro. SUBSCRIBED !

@rajeshmondal8392 2 жыл бұрын

Hello sir, I have a frontend built with React and a backend built with Node JS and Express. I want to hosting the site with cPanel. How can I do this? Please help me sir.