Learn useCallback In 8 Minutes

Подписаться 1,6 млн

Просмотров 439 тыс.

50% 1

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
In this video I cover everything you need to know about the useCallback hook. I go over all the main use cases for useCallback as well as many common mistakes that developers make. This is part of a series of React videos where I cover all the important hooks in React.
📚 Materials/References:
useCallback Blog Article: blog.webdevsimplified.com/202...
React Hooks Playlist: • React Hooks
🧠 Concepts Covered:
- How to use hooks in React
- How to manage referential equality of functions in React
- How to use the useCallback hook
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactJs #WDS #useCallback

Опубликовано:

19 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 258

@nanonkay5669 3 года назад

useMemo: Returns and stores the calculated value of a function in a variable useCallBack: Returns and stores the actual function itself in a variable

@GuitarreroDaniel 3 года назад

Thanks man!

@h2o313 3 года назад

good summary. I often found "useCallBack" is handy when you're passing the parent's setState function down to its children.

@Vishal-ki2df 3 года назад

Why can't we use useEffect instead of useCallback?

@vijaykumarreddyalavala3713 3 года назад

@@Vishal-ki2df Using useEffect you can run a function when a variable changes. But that does not mean that function will not run when the other state variables in your component change. Using useCallback you can make sure that the function runs exactly when you want it to run based on changes in a variable instead of everytime the whole component renders.

@ParadoxWorks 3 года назад

@@vijaykumarreddyalavala3713 Freaking nicely explained

@pawandeore6989 11 месяцев назад

for someone who is confused the main difference between useMemo and useCallback is usMemo cache values and useCallback caches the function itself

@pawandeore6989 Месяц назад

@@xlgnepoTechnically, you can achieve a similar effect by using useMemo to memoize a function, but it's not semantically the same as using useCallback. useCallback is specifically designed to memoize functions to ensure stable identities across renders, which is crucial for performance optimizations, especially when passing functions as props to child components. It's more explicit and conveys the intention more clearly. So while useMemo can be used for this purpose, useCallback is the recommended approach for memoizing functions in React components.

@tomaszkapalka 2 года назад

I am always impressed how you can explain quite complicated things in a simple way! As always...great job and many thanks!

@davidserranoii4114 3 года назад

Your understanding is inspirational. The biggest take away from this video im getting is to look behind the scenes to improve your code so you can run as efficiently as possible. Always look forward to your videos

@Shoulon 3 года назад

This is really awesome. I was building a grid that was initially built from a function then would set it to state. But my other components would force it to rebuild everytime. UseCallback fixed this issue!

@hamzafaysal909 3 года назад

Just watched your useMemo video and I was really confused between these 2 hooks but this video clears everything... Thanks Kyle : )

@stevereid636 2 года назад

This is awesome. I’ve been wondering about the differences for ages. I feel like Kyle just granted me a super power 😎

@angell2341 3 года назад

Explaining the usecase on why we have to use that is really ausum, I felt ur channel unique

@sottitron 3 года назад

Enjoying your hooks videos. Your video has a function passed into a component. It makes me think I'd really like to see a course or series on solving some of the trickier design problems with React. Specifically, concepts I've caught myself getting tripped up in my thinking with are: How to decide to use props, state or a store/reducer (and when to use context.) Strategies for interacting with APIs. When passing a function to a component makes sense. Testing your components when you're using hooks.

@markwillis1045 3 года назад

Ha, I’m so glad I found this channel. I’m going to be busy watching these the next few days! 😀

@zdargahi 2 года назад

you explain difficult concepts so clear and simple. Web Dev simplified, indeed

@mohmarroun3189 Год назад

Thanks , I am always impressed how you can explain quite complicated things in a simple way 👍👍

@GrigorMinasyan 2 года назад

So helpful! I had an issue where socket connection would get duplicated when toggling dark more

@marcelotorreblanca9276 2 года назад

I've been having a really bad time looking at the React documention about those hooks. And just when I was wondering about the difference between useMemo and useCallback: Boom!! you read my mind!! Just outstanding explanation!!!

@borisnekezov6620 Год назад

Thanks for that video, Kyle! The best and simplest way to understand useCallback!

@simeonieroteev4555 3 года назад

That explanation is very, very clear and useful! Thank you!

@aryanshmahato 3 года назад

Desktop in introduction was looking dope! Great video BTW..

@andrewshaban2888 Год назад

You are a good tutor. This is a rare talent. Thank you very much!

@tadeuszjiwu255 3 года назад

This is a very clear explanation, thank you very much, keep up the good work

@rohith8269 8 месяцев назад

Great explanation!

@mrnabby4178 Год назад

The topic is crystal clear. Thank you man.

@Stef-an 2 года назад

These short videos are life-savers for juniors. Thanks a lot!

@COROLOSTO Год назад

And mids :p, oh wait, that means that I'm not mid lvl? oh man! :(

@markwillis2336 2 года назад

OooF! This is just pure gold. You just helped me out of a hole again Kyle, thank you so much!

@simmzzzz 4 месяца назад

Best tuts on the web - PERIOD. Thanks Kyle!

@shivanyachandra4214 3 года назад

Great video!! can you make a separate based on the difference between useMemo and useCallback, this will really be helpful!

@developerbuddyavikunj5996 2 года назад

It was really helpful 🤗🙏 . Thanks alot for sharing. Finally got clarity on the concept.

@KaaiSpeaksHisMind 2 года назад

Beautifully explained, thank you.

@johnhaupenthal 3 года назад

Clear and concise, great video.

@oracleking4252 14 дней назад

I love this guy. He breaks it down!!!! Wherever I am, whatever mess I am in, I look for him to solve me problems. He's my personal full stack overflow

@NITESHSINGHNRS 3 года назад

bro....your explanation is to diff from others and have more details. keep it up.. superb

@davidgentilli7944 3 года назад

Thank you, Kyle. This explanation is incredibly clear and easy to understand.

@frontendHacks 2 года назад

watch useCallback Hook in Hindi in easy way explained ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Gj68rN0vLSc.html&ab_channel=Front-EndHacks

@logio7663 3 года назад

Very clear explanation. Thanks a lot ! !

@larcho 8 месяцев назад

Awesome video. There quite a few videos here in youtube that explains this poorly, thanks for this.

@johannesperez9548 Год назад

Crystal Clear, thank you so much!

@VishalSharma-rn7mt 3 года назад

awesome tutorial, when I will have money, I will definitely buy your course brother

@bek3634 Год назад

really simple explanation! thanks to you a lot.

@rileykarl4895 2 года назад

You and net ninja is a killer combo - thank for the great vids !

@maor44 2 года назад

Amazing work man! thank you!

@thebetoxpro 2 года назад

Amazing explanation. Thank you from Mexico

@jaytran247 3 года назад

Super genius explanation. Thanks so much.

@xylvnking Год назад

this one gave me a lot of trouble for some reason despite the other hooks not being too tough. the way i wrapped my brain around it is to remember that useCallback allows us to pass a reference to a function, whereas passing a regular function as a prop causes react to create a new function within the component on each render. useMemo allows us to avoid expensive variable calculations, and useCallback allows us to avoid redundant functions being created in memory. if I'm wrong PLEASE let me know lol

@ibrahimyoussef4489 Год назад

Wow!!! awesome I swear this lesson the real best lesson off all I get in this point and this always you

@keiferramos8858 2 года назад

very true. You really simplified it.Good Job😌.

@derekmoore7401 3 года назад

very helpful and succinct. Thanks for your videos!

@eldowado Год назад

Hey man - love these videos, you seem to have one on every concept. I **think** I can throw you some suggestions to make your audio even crisper, without changing your hardware at all. If you're interested, we can give it a go - then I can maybe ask you some React questions in return, haha. Be well, mate!😁

@davidhahn7391 3 года назад

great explanation! thank you.

@luaneaquino7835 3 года назад

Thank you! great tutorial

@iurii7752 3 года назад

Great explanation :) Thank you

@hoyinli7462 2 года назад

super clear. highly recommend this channel :)

@HOLONIA4EVER 3 года назад

Amazing explanation !

@vivarantx 2 года назад

great man, you deserve great success

@Wakkyguy 3 года назад

It would be very helpful if you could make a useMemo() vs useCallback() video demonstrating their practical usage in one sample project.

@WebDevSimplified 3 года назад

I have a blog post linked in the description which does a good job of comparing them to each other.

@Wakkyguy 3 года назад

@@WebDevSimplified Yes I have read that. Just wanted to see them being used in a single project.

@guidoglielmi7992 2 года назад

lt bugs me that useMemo(()=> ()=> [number, number + 1, number + 2]) would be the same as using useCallback

@GreatAdib Год назад

it can be used in search feature just use debounce an pass it to useCallback.

@eshwarravikanti7659 3 года назад

Great explanation!!!!! More power to you:)

@ifillup 3 года назад

Great explanation (again)!

@Karlponken Год назад

Great explanation! Thanks a lot!

@mayankvora8116 3 года назад

Awesome Explanation

@jnmldo 5 месяцев назад

Thank you so much for this video

@thecutedreamkostasp.4449 2 года назад

Excellent show case of usecallback! But i wanted to mention that u could avoid usecallback there if u just out the function outside the App Component and just pass the number as argument on it! Then every time App component rerenders the function wouldn't generated again! Big loves for your channel!

@lightrao Год назад

Thank you, very useful !

@shizasiddiqui1689 3 года назад

You're brilliant Kyle.

@prince5922 Год назад

6:19 You can pass parameters using useMemo, from react documentation, the following. useCallback(fn, deps) is equivalent to useMemo((yourParameters) => fn, deps).

@nishaindesilva3738 Год назад

thanks! this solve a major confusion in react. I always wondered why inner functional component resets on parental state update. the answer is useCallback() !

@jefersoncosta2621 2 года назад

awesome!! U rock, thank you so much for this video.

@shane2023amazon 3 года назад

concise and helpful

@manishkumartripathi2259 Год назад

Nice explanation 😊

@kwaku_2023 2 года назад

You are a blessing!

@nihadyaqublu2359 Год назад

thank you for the video!

@lakshyaagarwal4044 3 года назад

what a wonderful example !!!

@lemon_maho Год назад

Mannnn I was actually going to search for a solution to my problem, and then without me even searching, I see this video and I'm like : sure let's check it, just for it be the solution I'm looking for, now I'm off to use that in my code, thank you ^^

@naserpapi8921 Год назад

Excellent Thanks

@sergiyrudenko905 3 года назад

you da best, bro!!! thanks!!!

@cyberwolf9543 11 месяцев назад

I got this BRO )) THANKS TO YOU!!! AFTER 2 YEARS NOTHING CHANGED ABOUT USECALLBACK BRO?

@bibahbibah5108 Год назад

really u have simpleified to me

@tinmank 3 года назад

Hello, are you planning to make a simple login sample for React? What are the best practices? How about firebase? Most samples are using old class methods, but I really would like to make one with Hooks. should I get data with useMemo? or another thing I can't decide; how to use a different menu for logged in and logged out users. Thank you for your clean instructions. Best.

@abhilashreddy8724 3 года назад

Thanks for the great video! If a parent component's state is updated will it rerender the child component or not? So, in this case, if the number is changed will it rerender the List component irrespective of useCallback?

@neisservilla7239 3 года назад

thanks you really help me

@kose241 Год назад

you helped me get a job at coinbase, ty

@AnoJlJloH 3 года назад

You're the BEST!!!

@rahuldwivedi4758 4 месяца назад

Great work. But here’s the issue. The useEffect wouldn’t be called again in your List component as you have mentioned. But whatever inside your return is, will be re-rendered again. Put a console log inside the return block of list component to see. To prevent that you need to wrap the List component with memo, memo(List)

@lukisIVIII 3 года назад

You're the best teacher! You have a true gift, thank you!

@DediAnanto Год назад

Thanks, for beginner like me, I rarely use useCallback if my editor don't suggest it 😄

@vinzbrain 2 года назад

Great video! 2 questions: 1) wouldn't it not make more sense to pass the generated array to List rather than the function that generates them? 2) can useCallback be achieved with useMemo that that wraps a function that returns a function?

@rajk1623 2 года назад

I like the second question, I wonder the same.

@Neha-sw6ky 3 года назад

Loveeee from India❤❤❤

@mohammadsaadati2863 Год назад

Tnx very useful

@ritavdas7570 Год назад

Amazing video

@blakelarson5005 3 года назад

Great video

@Bruno-ds8ze 3 года назад

finally thankyou very much

@yag7769 3 года назад

Amazing, thankss

@Johnny-rn8fb 2 года назад

Thanks

@mythm2063 Год назад

Hello i'v got a question, since te console.log is only inside useEffect, So that means the List is still being re-rendered every time ? Maybe you should have used React.memo? Thanks for the potential answer

@snarkykat 3 года назад

Congratulations on your engagement :)

@Cloud-577 3 года назад

how do you know?

@snarkykat 3 года назад

@@Cloud-577 It was on Twitter

@DeepakGupta-hj2dv 3 года назад

Hey Kyle..please cover redux concept

@satindersingh9671 3 года назад

You are the best

@StephanHaewss Год назад

From the docs "useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)", so it is just a shorter way for memorizing functions as I understand it. Anyway, good video!

@naveedalirehmani4135 Год назад

So the main difference between useMemo and useCallBack is that one returns the value of the function and the other returns the actual function, but what if I use useMemo and return a function as the return value. will it work the same or am I missing something here? Like this. const functionWithMemo = useMemo(()=>function(){})

@StephanHaewss Год назад

@@naveedalirehmani4135 As I understand it, this is equivalent to useCallback, yes.

@goharamin820 3 года назад

thank you soo much

@sudhansupradhan6891 2 года назад

Awesome 👌

@rafaelcadena4514 3 года назад

Do you can do that for Function Components too? I mean, to avoid some Child Function Components to re-render if the father Function Component have changes on their state?

@alisherdotdev 2 года назад

thanks Kyle :))

@ralfrolfen5504 Год назад

Use case: when you pass the a function, created inside a component, as callback into another component ( results in the use case of referential equality, but might not necessarily be clear to everyone)

@JohnDoe-ru8le 2 месяца назад

Even if you’re not using a useEffect or any hook that depends on the parents function, it’s still useful to useCallback to prevent unnecessary rerenders?