React Custom Hooks with Axios Async useEffect | React Tutorials for Beginners

Build React custom hooks with Axios in this React tutorial for beginners. We'll construct our own useFetch hook that applies Axios instead of the Fetch API. We'll also get started with a simple custom hook called useWindowSize.

🚀 This lesson is part of a Learn React tutorial series playlist:

React Custom Hooks

(00:00) Intro
(00:05) Welcome
(00:19) Quick Set Up
(00:43) Rules of Hooks
(01:45) React Custom Hooks are like recipes
(02:41) Creating the useWindowSize custom hook
(08:46) Reviewing the useWindowSize custom hook
(09:25) Applying useWindowSize to the React App
(15:01) Remember the useEffect clean up function
(17:20) Creating the useAxiosFetch custom hook
(25:34) Reviewing the useAxiosFetch custom hook
(27:16) Applying useAxiosFetch to the React App
(35:19) Final clean up

🔗 Rules of Hooks:

🔗 Collections of Hooks:

🔗 Axios:

🔗 React Router:

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about React Custom Hooks helpful? If so, please share. Let me know your thoughts in the comments.

#react #custom #hooks

[eleah]

This simple little app is getting somewhat involved. Very nice. Thanks.

[aswinvignesh]

Couple of questions ⁉️

1. UsewindowSize runs only once as we log and we only use load time useEffect,
but can you explain how this makes custom hook to constantly updated the size as we remove eventlistner at the end of 1st run itself !?

2. Is cancel token in axios cancels any previous request that is made ? And we make sure by isMounted to make a new request ? Am i right on this ?

And also
Thank you so much on this wonderful content 💕

[JonBrookes]

Hi Dave,

thanks for posting this well crafted video revealing the use of custom hooks in react. The example of a window resize hook is very clear, practical and thus easy to understand. The axios one likewize is the same and builds from this so as to crystallize key concepts.

I came accros your channel looking for a better insight of migrating react to use typescript, for which your other content is also excellent. A veritable gold mine of information and learning 😊.

[Pareshbpatel]

Beautifully presented tutorial on creating and using custom hooks in React. Thanks, Dave

{2022-02-21}

[mohamedyoussef]

Thank you for covering topics no one else has explained

[kostiantynkarzhanov]

Hi Dave! Thank you for all your lessons. Awesome content. Best channel ever! 💛

[ivanfrey]

Hey Dave, I was a bit confused on the clean up function and 'memory leak' thing you mentioned, I wasn't sure what you meant. I think another way it can be mentioned is that we need that cleanup function because of this: When we refresh our page the component mounts, useEffect runs, and the Window has the event listener attached to it. However, the clean up function is necessary because when we reload the page again and cause our component to unmount for a small amount of time, we want to remove the event listener from the window object so that we are not constantly adding the event listener to the same object. It's like a light switch I guess, we want it on and off, never just on on on, etc. Let me know if this is the right way to think of it.

[josephuzuegbu]

I really like the tutorial. It explain useHook very well. Thanks

[isaacnewtonaranas]

awesome tuts! latest as well! i was looking for latest videos to get learn react with axios and these tuts are in the list. some are 10-8 months ago but this is a month only. very latest. GREAT!!! THANKS VERY MUCH!

[nadatarekhassangaafar]

why did you use dataUrl as a dependency for useEffect?

[arefobaid]

thanks but i dont understand how it when our compunent is unmounted we remove the eventlistener how it still work and check the size when the size of window is changed througth we have removed the listener

[insteresting]

Hi Dave. Very nice tutorial as always! I have one question. At 30:00, you setPosts(data) inside the useEffect and also place data in the dependency array. Why didn't that cause an infinite loop, as everytime you setPosts, the dependency array changes? Maybe I am missing some point and can't find out what it is.

[martin_orue]

Hi, Dave!

Just to make sure I understood correctly: in this specific case, it wouldn't actually be necessary to check if the component unmounts, right? Because Feed is being rendered within Home, and Home will never be removed from the DOM (since it's rendered by default on the path '/').

However, obviously, as it is a reusable hook, it is useful to perform that check in case it is needed in the future.

Does what I'm saying make sense?

Anyway, thank you for sharing these tutorials, I find them extremely helpful.

[hungnguyencanh]

Thank you for great content. But one question, why you use UseEffect to SetData in App.jsx after create custom hook? It's already in custom hook

[AdityaDey]

What does 'isMount' mean ? Please explain it a bit !!

[HologramJay]

David, another really good tutorial! I just had a question about the "isMounted" var in the clean-up function. If the clean-up function fires right before useEffect runs again, isn't isMounted still going to be true until then? It seems like the time span between the component unmounting and the component re-mounting that isMounted would still be true.

I placed a console log for isMounted within the clean-up function. The log from the clean up function only prints out right before useEffect is used again and it's value is false, but was it true before then and changed to false before useEffect ran, or did it have it's value changed to false when the component unmounted? I'm just confused as to when the clean-up function actually runs and isMounted's value is changed.

[Behold-the-Florist]

Are you also able to return setData from the useAxiosFetch hook so don't have to use posts as a separate piece of state or use a useEffect to set it. And the useEffect to filter the posts, can you just use useMemo for that? Thanks

[jiweihe]

Thanks for the helpful video! I want to use the fetch data custom hook inside a handleClick() function, since I want to pass a query parameter to the URL by clicking a search button instead of a fixed URL. It gave an error. It seems we can only put hooks at the top of components. Should I use something else for this scenario?

[nikolasfuruta]

Hi Dave, thanks for the lessons! I have a question about 'useAxiosFetch'...in the data state, I wrongly put an empty string as the default state and everything went wrong...I don't know why this happens, since the default state is overwritten after the featch.

[kiranrai]

Hello Dave, I have stuck in one part. the post method was working fine before the editPost method, but when I created the editPost method and the custom hook for the device width, the post method is continuosly showing me internal error when I click the handleSubmit button. I have checked the code thoroughly but I can't find any mistake, can you help me on how to overcome the internal error problem.
const response = await api.post('/posts', newPost)
this is causing problem in the try block, but I can't see any problem in this line.