Custom Fetch Hook with React Hooks

Custom Fetch Hook with React Hooks

react on shared hosting

Daily Webdev Newsletter:


Premium and FREE Courses:

$100 DigitalOcean hosting coupon:

Like my videos and tutorials? Consider donating:

Don’t forget to subscribe! Really appreciate it!

Best Shared hosting:

ES6 for Everyone — The best way to learn modern ES6 JavaScript
Sublime Text Power User Book
React For Beginners
Learn Node
Learn Redux
Javascript in 30 lessons
Learn Flexbox:
Learn CSS Grid:

I Found an Answer by Twin Musicom is licensed under a Creative Commons Attribution license (

Music: Mura Masa – Lotus Eater (Tonton Remix) by Underground Charisma

12 thoughts on “Custom Fetch Hook with React Hooks

  1. Morning mate. I want to use a custom hook such as useFetch but on an onSubmit event handler, but this is against hook rules. Any suggestions in using a custom useFetch but onSubmit on a form as I need data first. Thanks.

  2. Thats because of your random id, thats why your useeffect is still running. Useeffect will trigger if you something change in render like your url because your generating random id for that

  3. when and why do you use const [data, setData] = useState(whatever)) and next, define a const data ?
    Why don't you just use a structure response to embed with response instead of a formated data form who is already fixed inside your useFetch function ? It makes no sense i think.
    the url in your useEffect inside your useFetch was ok, just you have a customId change all the time and this one update the view to the infinite…. you should also use a kind of useCustomId to create, or add this to a useEffect with empty array option.
    I think, you can remove this tuto and do a new one to be better.

  4. hey nice video but i have a button how can i use this customerHook when i trigger my button clicked ? and inside my button i'd like to send multiple api calls with the same url.. how can i deal with the response ?

  5. The math.random generates different random numbers each time it is called and since the random numbers are appended to your URL your URL changes which is why it is re-rendering when you add [url] as a dependency in the useEffect hook.

  6. The reason why the new user was generating multiple time was due to –
    The randomID was generating a random number which was altering the value of apiEndpoint. apiEndpoint was being passed as a url parameter to the useFetch function/hook and inside the hook, useEffect was listening to the changes in the url. And since after each useEffect, the component gets re-rendered (similar to setState), all the code blocks were called again inside the App functional component. And since randomID was generating another number due to the new Math.random() value, the apiEndpoint was altered again and useFetch was called with different url parameter and it made the component render with different data value, and this continued infinitely.

    The way to stop is :
    1. Stop listening to the changes in the url parameter and the useEffect would be called only once, as shown in the video.
    2. Better, call randomID using Math.random() somewhere outside the main App component like creating a custom hook for useRandomID or passing it as a prop as suggested by @LuLuLiLa in comments.

  7. The reason why useEffect got called multiple times was because you generate your randomID every time your component renders. To get around this you could create another custom hook (like useRandomId) which get's called just on mounting or by passing the randomID to the component through its props.
    Cool video. Thanks for sharing it 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *