Async React Hooks 

You have the ability to make things go into my brain really easily. Thank you sir.

Great video! Props for not being scared to show your personality in these videos. It makes the content great.

@4:48 TENSE!!! SAY TENSE!!! 😂 I love your content Harry, very informative. Keep up the good work! 👏🏻

I'm a PHP oriented dev who just started to learn React. Thank you, because of your videos it's pretty easy to grasp the concepts of React/JS!

Great video! Only one thing, avoid inline methods, this is recreating the function every time when DOM renders. Instead pass a reference to the function, as this is not recreating the function over and over.

Very simple and effective tutorial on async react and custom hooks! Thank you!

Awesome!! :) After a few hours of trying to figure out why my state wasn't updating on time, I've found your video! Thank you so much!

You can write a useCallback async method and call it directly from the useEffect. You don't need to embed it within the effect.

I love the fun example. It really solidified the concepts. I subscribed without hesitation!

Recently I have been watching some of your react videos, your way of explaining things is really nice and comprehensive. Nice video

thank you very much for this tutorial, it's really great to make examples that are very useful in creating real-world applications, keep up the great work you do 👍 👏 😁

THANK YOU for this video!!! Definitely needed this. Just this weekend I was having issues with useEffect.

if I'll describe in words it'll take a lot but in short you help me to debug a really messy warning that I was getting from long time so thanks a lot..

Man, your way of teaching is dope! Thank you so much, from Russia with love :)

19:00 "Not sure why there is a plane for maybe" It's because you moved the fetchData function outside the component and gave it a parameter for query, but you never passed in query. You were actually searching giphy for undefined and not for your searched term You didn't trick anything because you still needed to pass query into the fetchData function and React would have yelled at you for it not being a dependency Still a great video!

I actually like this async hook rule. Makes the code cleaner. I ran into this problem recently in an app I’m making and I actually made an IIFE inside the hook to save some code space. Love me some react!

For noobs like me: When naming a React custom hook, remember it must start with the word "use". Example: useAPI()

very advanced principles of react, but so interesting i have learned a lot a beginner thanks !

One point that I noticed, you missed to pass `query` to fetchData at 19:00. So `maybe` keyword were not working, probably returns first 10 gifs automatically. and thank you for this great video!

Thank you for providing the async lecture. I actually tried the code by adding it to my app. It was fun, though, I need to get API key for GIPHY. It was worth it as I knew this website. From Kamakura, JAPAN

I just learnt react then u did really good explanation about async hooks.

Not allowing async funtions in `useEffect` does not prevent race conditions, your code can very much have a race condition if you submit multiple times quickly, because the `setResults` function could be called at different times

Awesome again! There are so many amazing videos in your channel.

Love this. Subbed and liked.

Thanks, great vid. One small thing, at 8:00, you have to be careful with that way of logging. In Chrome it will log whatever value that name points to when Chrome resolves the name, which isn’t necessarily the same value as it had at the time that your console.log call ran. (Sorry, bit tricky to explain.) It might be safer to use Object.assign or JSON.stringify in your console.log call. Thanks again for the vid. 👍

Hi Harry, you fetch data when the state is changed, hence useEffect (similar to componentDidMount, perhaps). Can we just fetch the data when onSubmit called / search button clicked? so no need to use useEffect. I am having hard time to understand it because I rarely use componentDidMount. Or is it so we don't call fetchData in different places multiple times? with class component for example, if we need initial fetch we would do it in componentDidMount and later on in onSubmit, but with useEffect we can just use function fetchData once. Thanks for the tutorial, cheers!

Great overview. Will def share w loved ones.

Great job.

Hello Harry! Thanks for the video really helpful. One note though which I found weird is how you could make the useEffect "think" that query is not a dependency anymore. And I realized that during the refactor you did not put the query as parameter to the refactored async function. I guess that was the reason you got a bunch of airplanes result for query "maybe". There was no query at all in the api call I guess. I don't know if anyone pointed this out before or if it is true at all :D would be interested in your opinion. I love your videos!! You explain things in very nice and understandable ways!

Man u are really good at explainig something with some fun) All the best from Russia)

Hello Harry, have you some video with multiple async calls and useReducer?

what does the value={search} attribute on the input tag do?

So Clear ! Crystal ! Thanks a lot !

Would love to see a debounce or trottle feature on this async hooks search , great video nonetheless.

I wonder why he still has only 7.83k subscribers?? He should've been a RU-vid rock star by now?

Thanks for this detailed video :)

Piece ok cake! You have some skills!!! Thanks Sir!

Another great video, thanks for your effort... and honesty! :)

Appreciate this video, the async await adaption was a bit misunderstood by me.

Great video! Very informative and entertaining at the same time ^^

asyn function just help to avoid the callback sysntax ,.then(callback).then(callback2). How can we use callback with Picker componenet , if we need to use fetch method to get data for another Picker2 based on the selection of first Picker component?

On what model of iphone this video was made? looks great

I’ve with dealing with calling multiple API’s const [loading, SetLoading] = useState(false) sucks It’s better to just use: let mounted = false Then before calling the api: mounted = true Then after calling api: SetGiff(gif.data) mounted = false Works great when cancelled subscriptions

Hi harry, please try to make a video about react-query and how to use it along with usefffect hook, thx in advance

Suppose airplane gifs are for 'undefined' query string ;)

Hey Harry , I actually re watched your video today :) just to understand more about custom hooks ,Please correct me I am wrong I understood that with custom hooks difference between previous version's approach is that in hooks version we can return data from stateful custom hooks those can act like actual functional components, which we could not have been able to do in older versions , in your example we would have had to create a separate functional component that keeps on re rendering once we change query and pass results as props to that component , Please confirm also please make some more videos if possible that you can address use cases in which hooks based approach has more advantages with respect to class based components , one I already understood from your example

Nice video. I just don't quite understand why did you want to use the hook. You could just have a normal async function on submit. It would work anyway?

I think that useGiphy hook misses a cleanup function where you set some flag that you no longer care about the response of the given query

I'm sorry that I did not get acquainted with your higher education earlier ❤❤❤

Great Video Harry! Greetings from germany :)

How do you test this?

search state is unnecessary - there's no need to get the input value from state when you can get it directly (with a ref, for example) from the input itself when form is submitted :) 1. init the ref with const inputRef = useRef(null); 2. use that ref on input - 3. on form submit you can get the value of that input with inputRef.current.value

you are good man! very nice video, I liked to watch u :D

Great video! I'm and inventor and software developer as well. I create my own original software applications. My question to you is: How long can the async call wait for the response? In my situation I also write the service in the server. The maximum wait time should be configurable, but where would you put it?

Great video. Really enjoyed it. Wud b coolto add some unit testing.😂

hooks == blocs???( dart || flutter world) seem so similar when u think abstractly...

That's a great tutorial!! Questions, (1) you are using useState here, what would be a use useReducer instead? (2) if there are lots of updates but in the same component would you use lots of useEffects to update stuff? I feel we are using useEffects as a nice replacement of actions/redux.

Great video! Thanks! 🙏🏼🙏🏼🙏🏼

Hello! love your videos, i have been trying to manage state with useReducer but im having trouble when fetching data from an api, could you demonstrate how to do this in a video? or should i be doing it with useState instead?

Amazing video!! Thank you.

You need to have clean up in your useEffect. To ignore the data returned if the request was killed.

i don't understand how this work around 19:00 fetchData().then(setResults); inside then, there is setResult.. but nothing set?

great

Great Video! Thank you :)

Hey Harry cool video, very useful as I've just moved to React Native. A quick questions around your example though using Async on a encapsulated function which is then called when needed... I'm adopting exactly the same concept in one of my component where I need to execute a series of API fetch calls (using Redux dispatch by the way) and then at the end move to a new screen where the data will be rendered. The problem I'm having is that if I use Async I may move to the new screen before all API calls have been retrieved resulting in an error in rendering therefore I'm forced to run all function calls in sequence (.then) and move to the new screen at the end. This is obviously proving to be rather slow as I'm calling about 10 different end points. Is it possible using what you showed in this video to run everything async and then the last action (move to the new screen) only after all API have been executed? Many thanks

Nice, thank you! Quick question: if we removed query/setquery and the useeffect call and just directly fetch onSubmit instead, would that lead to problems?

Great video!

Hey, I think the fetchData doesn't really need a query parameter, it's already in scope from the useState hook 😉

Thank you so much

Hey man, thanks your useful sharings.. Could you share us your development environmet that about vscode settings and your useful extensions for react (prettier, eslint etc...)? Thanks a lot again :)

Thanks for not making a counter!!! Any tips on organizing state when using redux?

How te remove dependency warning if we need to run once useEffect? Because I have warning il all component with Empty Array passed in argument

OG Hook ROFL

Awesome Video. So lets say that you have an app with a number of async calls that use a idToken set in a global context. How would you organize those custom API calls. multiple files with multiple custom hooks?

BUENARDO

Great video, thanks! Had a question - does having the fetchData function definition within the effect mean that function is getting created every time the effect is run? The function definition never changes, so it seems like a performance hit to keep redefining it.

ur dope af

Boss =)

hungry learner i am

Too much clowning...

you got another view, lasted only 5 seconds ...

Too much face