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.
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!
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!
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..
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
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. 👍
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
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!
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 👍 👏 😁
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!
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’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
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?
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?
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?
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?
Nope! That’s perfectly fine! I actually did that in version one of this talk and then realized i wasn’t showing async react hooks lol. So i did that for demo purposes.
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
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 :)
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.
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
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?
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?
@@hswolff thanks man. I went with one file exposing multiples. The problem I'm running into is that I am implementing this on a component that gets re-rendered multiple times (some for no good reason like states being updated that are not impacting the view) I feel like I have to memoize it
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.
All those things are true! It gets created on every render and is a small performance hit! However the thing to consider is how much that (mostly undetectable) performance hit is worth versus the developer experience of having the eslint rule work correctly. Mostly I try and remember to not try and prematurely optimize my app until I need to. And I have still yet found a need to optimize the performance of any of my apps.
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 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.
Eyyyyy, great to hear! Code is for humans, right?!
@@hswolff Hero :)
You can write a useCallback async method and call it directly from the useEffect. You don't need to embed it within the effect.
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.
useCallback
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!
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!
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!
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!
That's tremendous to hear! Thank you for watching!
I love the fun example. It really solidified the concepts. I subscribed without hesitation!
Great overview. Will def share w loved ones.
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..
You are very welcome!
For noobs like me: When naming a React custom hook, remember it must start with the word "use". Example: useAPI()
Part 2 of that is to always check if what you need from the api call you make, example of that is 14:47 where he has 'item.images.preview.mp4'.
no it doesn’t that’s a convention
very advanced principles of react, but so interesting i have learned a lot a beginner thanks !
Very simple and effective tutorial on async react and custom hooks! Thank you!
Thank you! And you are welcome!
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
It doesn’t prevent them by default, correct, but it does raise their visibility to aid when debugging.
@4:48 TENSE!!! SAY TENSE!!! 😂 I love your content Harry, very informative. Keep up the good work! 👏🏻
Hahah TENSE!
Man, your way of teaching is dope! Thank you so much, from Russia with love :)
Woohoo! So glad to hear that!
So Clear ! Crystal ! Thanks a lot !
Suppose airplane gifs are for 'undefined' query string ;)
Hello Harry, have you some video with multiple async calls and useReducer?
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. 👍
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
THANK YOU for this video!!! Definitely needed this. Just this weekend I was having issues with useEffect.
Woohoo!!! Glad it helped!
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!
Recently I have been watching some of your react videos, your way of explaining things is really nice and comprehensive. Nice video
Love this. Subbed and liked.
Great job.
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 👍 👏 😁
what does the value={search} attribute on the input tag do?
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!
Thanks for this detailed video :)
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!
Appreciate this video, the async await adaption was a bit misunderstood by me.
Woo! Glad it helped!
On what model of iphone this video was made? looks great
I just learnt react then u did really good explanation about async hooks.
I wonder why he still has only 7.83k subscribers?? He should've been a TH-cam rock star by now?
Maaaaan I wonder the same thing. Where are all my peeps at?!
Would love to see a debounce or trottle feature on this async hooks search , great video nonetheless.
Hi harry, please try to make a video about react-query and how to use it along with usefffect hook, thx in advance
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
Yeah didn’t want to go too far with that in this video but I’m so glad you commented about it!
Hey, I think the fetchData doesn't really need a query parameter, it's already in scope from the useState hook 😉
Yeah the example is a little contrived, for sure.
@@hswolff a very good video nonetheless 😎
Awesome again! There are so many amazing videos in your channel.
d'awww, thank you!
Piece ok cake! You have some skills!!! Thanks Sir!
Hahaha, thank you!
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
Ah yeah probably. That'd be a nice little improvement.
You need to have clean up in your useEffect. To ignore the data returned if the request was killed.
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?
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?
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?
Yes, it probably would have. It was more to show how you can do it.
Man u are really good at explainig something with some fun) All the best from Russia)
Hey thank you! Appreciate hearing that!
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?
Nope! That’s perfectly fine! I actually did that in version one of this talk and then realized i wasn’t showing async react hooks lol. So i did that for demo purposes.
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
Thank you so much
You are very welcome!
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 :)
Ooh good idea. I’ve been asked this a couple of times so I’m gonna bump it near the top of my list of videos to make. Thanks for watching!
Thanks for not making a counter!!! Any tips on organizing state when using redux?
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.
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
Great video! Thanks! 🙏🏼🙏🏼🙏🏼
You are welcome!
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?
How do you test this?
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?
Could have an apiHooks.js file that exposes multiple custom hooks for each API call. Or just create one custom hook that lets you make API calls?
@@hswolff thanks man. I went with one file exposing multiples. The problem I'm running into is that I am implementing this on a component that gets re-rendered multiple times (some for no good reason like states being updated that are not impacting the view) I feel like I have to memoize it
Great video!
Thank you!
Great video! Very informative and entertaining at the same time ^^
Woohoo! The double whammy wins!
I'm sorry that I did not get acquainted with your higher education earlier ❤❤❤
Great video. Really enjoyed it. Wud b coolto add some unit testing.😂
Hey , love your theme what's your setup?
Theme is "Atom One Dark". Couldn't leave the Atom theme behind when I went to VSCode :)
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
Can just override eslint with `// eslint-disable`. Sometimes you know better than the linter!
@@hswolff It's a good practice to disable it ?
Great Video Harry! Greetings from germany :)
Thanks!
great
Great Video! Thank you :)
hooks == blocs???( dart || flutter world) seem so similar when u think abstractly...
Another great video, thanks for your effort... and honesty! :)
Hehe, I think it makes the videos more fun when I’m scared stupid lol.
Amazing video!! Thank you.
You are welcome! Thanks for watching!
OG Hook ROFL
you are good man!
very nice video, I liked to watch u :D
woo! thank you for watching!
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.
All those things are true!
It gets created on every render and is a small performance hit!
However the thing to consider is how much that (mostly undetectable) performance hit is worth versus the developer experience of having the eslint rule work correctly.
Mostly I try and remember to not try and prematurely optimize my app until I need to. And I have still yet found a need to optimize the performance of any of my apps.
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
BUENARDO
ur dope af
no ur dope af!
hungry learner i am
Boss =)
you got another view, lasted only 5 seconds ...
Thanks!
Too much clowning...
Too much face
😭
i don't understand how this work around 19:00
fetchData().then(setResults);
inside then, there is setResult.. but nothing set?