Duration 20:19

Build useFetch Custom React Hook to Fetch Data in 20 Minutes

18 406 watched
0
455
Published 21 Oct 2021

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 - https://relvl.co/93nn Leaderboard- https://relevel.com/leaderboard Business Development: https://bit.ly/3AyFU5r Backend Development: https://bit.ly/3uZsjmj Frontend Development: https://bit.ly/3DksJGJ ⭐️GitHub link for Reference⭐️ https://github.com/dmalvia/React_Custom_Hook_UseFetch ⭐️ Support my channel⭐️ https://www.buymeacoffee.com/dipeshmalvia ***React Roadmap for Developers in 2021*** How to Learn React JS ? - /watch/c5Ocp8jVy60Vc React Fundamentals Project - /watch/si02owKGJoQG2 Learn React Redux with Project - /watch/ISCKYL5i6W0iK What is Redux ? - /watch/cCWCB9nNjNqNC Learn React Redux Thunk with Project - /watch/cdWNGLfRZDJRN ***More videos*** JSON Crash Course - /watch/Ij_v2fbMhO6Mv Asynchronous Vs Synchronous Programming - /watch/EXcC3yciseoiC Async JavaScript Callback - /watch/wu5wvEvuez1uw Async JavaScript Promises Tutorial - /watch/AzpP2zR4VvJ4P ***Checkout my Crash courses for get started with web development*** JavaScript Tutorial For Beginners - /watch/oR8ggb-StpsSg HTML5 Crash Course in 1 Hour - /watch/cgasmsFQ3jAQs CSS Crash Course in 1 Hour - /watch/cl_A_U_ksYnkA 🔗 Social Medias 🔗 Twitter: https://twitter.com/IMDmalvia Facebook: https://www.facebook.com/programmingwithdipesh Instagram: https://www.instagram.com/dipeshmalvia LinkedIn: https://www.linkedin.com/in/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.

Category

Show more

Comments - 34
  • @
    @DipeshMalvia3 years ago 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. 13
  • @
    @codedusting6 months ago Great. I' ll extend it a little bit more for handling graphql calls with inmemory cache.
  • @
    @ShaikhAhmedReza7863 years ago Awesome. Really appreciate it. Got to know a new thing.
  • @
    @abdullahclementabdulshekur67362 years ago Very good way of implement network request in reactjs, could you make a video with post method. I like the level of abstraction. 1
  • @
    @mariusgardelli42622 years ago 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, thefrom usefetch displays the data
    .
    ...Expand
  • @
    @RanaAhmed-gr4ub3 years ago Keep going brother.
    your react code so clean.
    3
  • @
    @rajeshmondal83923 years ago 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.
  • @
    @alexon2010last year 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 . ...Expand
  • @
    @subhashgn17753 years ago Very well explained.
    thank you
    how to handle multiple api calls in single component?
  • @
    @gastonartazayanez37303 years ago Thanks for all your content
    it is really helpfull for me. .
    1
  • @
    @sachinkotian28292 years ago So if we have custom hooks then why to use high order component? 1
  • @
    @ganeshk84103 years ago Hi bro, please post react and redux testing stuffs like jest, react testing lib.
  • @
    @fitnesspriority3 years ago Please use arrow functions for defining func comp: 1
  • @
    @Olatee3 years ago 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 . ...Expand
  • @
    @arnabchakraborty35953 years ago 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 . ...Expand 1
  • @
    @pateljay53513 years ago Hi dipesh, please tell me which one is better for state management
    1) context api
    2) redux
    3) recoil.
  • @
    @Pareshbpatel2 years ago Nice illustration of creating a custom hook to fetch data. Thanks, dipesh
    {2022-10-14}.