Obviously such optimizations are not necessary with a small number of re-rendered children as long as they are not too heavy. But at what point does memoizing become important? 100 items, 1.000 items or maybe 100.000 items? Share your thoughts here ✌
Try to have a large form of inputs. And control this form via Formik library for validation of user input. Probably (or even highly likely) you'll face some issues with unnecessary re-rendering...
This was a great video. I am brand now to full stack development. Days old. I looked up a video he mentioned to learn about profiling and performance to speed up a build. I looked up some stuff and I go here to your video. The problem for me is I think I am a little too new to full appreciate it yet. I took notes on everything you said and I have bookmarked this. Thank you.
I like this channel it deserves more subscribers🔥 you're very calm and your explanation while coding is so clear and straight to the point. Thank you for your quality content!
But was the memo() of the child input components necessary after the useCallback() addition? Was the callback the only issue, or was memoization of the components themselves also necessary?
sir can you do a same playlist for nextjs also need some glimpse of how senior software devs are writing code and folder structure in nextjs with scalability for future propects.
Nice video about a very common issue. Personally, issues like this is why I believe React needs to go the way of the dodo. Devs shouldn't assume that giving up control over when to render is going to magically make everything simple.
This will not help if we have like 15 - 20 input, radio, uploader, switches. Because using usecallback for all will be a problem. memorization technique comes with a cost.
sorry bro , can you give me some thing for my project. my mernstack project brings some featurs late. so what my be the solution or what is the problem
@@SoftwareDeveloperDiaries ah… this example works for me, thanks 👍 e.g. (I need to call useCallback for each list item in a loop, but it’s not allowed)
And what about the context? Is there a way to improve performance of that? Because since context update one of its values, the whole value gonna be considered as a new one, and all of the components that have hooked useContext will be rendered Iven they have memo on them
id and value are probably of type 'String' or 'Number', which are both primitive types (includes string, number, boolean etc.) in JS. On each re-render of the parent, anything which is not a primitive data type - it could be an array, a function, or an object - all these are re-created (re-assigned a new reference/location/address in the memory) by the parent component because these are referenced by memory. All the primitive values are not re-created and hence, those do not change on the parent's re-render, which is why we don't need to 'cache' primitive values.
Obviously such optimizations are not necessary with a small number of re-rendered children as long as they are not too heavy. But at what point does memoizing become important? 100 items, 1.000 items or maybe 100.000 items? Share your thoughts here ✌
I want to ask
if I have a lot of element and put them in memo function Will it cause me memory problems?
Try to have a large form of inputs. And control this form via Formik library for validation of user input. Probably (or even highly likely) you'll face some issues with unnecessary re-rendering...
This was a great video. I am brand now to full stack development. Days old. I looked up a video he mentioned to learn about profiling and performance to speed up a build. I looked up some stuff and I go here to your video. The problem for me is I think I am a little too new to full appreciate it yet. I took notes on everything you said and I have bookmarked this. Thank you.
Happy to hear that! Good luck in your journey 😊
the best useCallback usage and example!
thank you for the great example of real life usage of these hooks! It's so precious among other explanations
Happy to hear that! ❤️
I like this channel it deserves more subscribers🔥
you're very calm and your explanation while coding is so clear and straight to the point.
Thank you for your quality content!
I appreciate your feedback my friend!
mind-blowing, that's what i was searching for a very long time 🔥🔥
I've seen code like this in my codebase at work and didn't really get why it was necessary, this kinda makes a lot of sense
Bro explained useMemo and useCallback hook in a much easy manner 👏👏
This helps get a deeper insight, very helpful. At least for a beginner like me. Keep up the good work.
Really helpful. Thanks! The useCallback solution is exactly what I've been looking for.
Massive thank you!! You explained this perfectly and helped me solve an extremely annoying bug I’ve been dealing with 👏🏼
Happy to hear that! 😊
Thanks bro I'm gonna use this advices for my further project
Great summary and presentation! Thank you.
Thx for the info will try that later!
Watched your 10-15 videos(1st day), amazing Stuff and beautifully explained!!!!
Thans a lot! Glad you like them!
You saved my time with this video, thank you!
nice explained
Dude, more! First video I watched and I loved it
Happy to hear mate! More to come :)
It was a good video.
If you create a playlists on performance optimization, that would be great❤
I will consider it! Thank you 😊
It was very helpful, thanks for your efforts
Thanks ! If I knew this, I would have saved my last job 😅
But was the memo() of the child input components necessary after the useCallback() addition? Was the callback the only issue, or was memoization of the components themselves also necessary?
Wow, Thanks a lot bro. Now I understand it
Very good analysis, great work
Thanks mate :)
sir can you do a same playlist for nextjs also need some glimpse of how senior software devs are writing code and folder structure in nextjs with scalability for future propects.
I can't wait for React 19's compiler to come out so I don't have to bother with this.
Thank you for this awesome tutorial.
Really useful video!
Cool stuff, thanks
Thanks :)
Thanks for the video.
Sure, thanks for watching 🙂
Nice video about a very common issue. Personally, issues like this is why I believe React needs to go the way of the dodo. Devs shouldn't assume that giving up control over when to render is going to magically make everything simple.
Great point!
That is helpful for my work, Thanks for this vdo
That's awesome, happy to hear!
great tip
thank you for this quite helpful info 👍🏻
My pleasure 🤓
Well explained, good job👍
Glad it was helpful!
Great job
This will not help if we have like 15 - 20 input, radio, uploader, switches.
Because using usecallback for all will be a problem.
memorization technique comes with a cost.
Really helpful, thank you!
Glad to hear! 🙂
well explained 👍 appreciate your content
Thank you mate ✌
Just wondering why react doesnt do this optimizazion by default?
very well explained!
Would you please explain virtual DOM and how it updates the RealDOM?
Hey mate! I put it on my list, but in the meantime I found this insightful article, maybe it could help you :)
blog.logrocket.com/virtual-dom-react/
Thank you
Thank you too 😊
Amazing content! thanks
Thanks mate!
This was soooo good.
Yaay 🥳
Can I use useMemo on that function instead of useCallback?
Hi, great video. What theme are you using for your vscode?
Thanks! It’s “Atom Dark One” :)
is it possible to put the useCallback in the child component so it does not care if proper callback or a function is passed?
Good One Bro..
Thanks ✌️
Great job 👏
Thank you! 😃
my god! why we dont use these things in our code... thanks for sharing! open some new areas to study.
Happy to hear mate!
sorry bro , can you give me some thing for my project.
my mernstack project brings some featurs late. so what my be the solution or what is the problem
Quality content!
Thanks mate!
can we pass parameters to the useCallback((id: number) => () => setSelectedId(id),[]); ?
Yes, you can:
beta.reactjs.org/reference/react/useCallback
@@SoftwareDeveloperDiaries ah… this example works for me, thanks 👍 e.g. (I need to call useCallback for each list item in a loop, but it’s not allowed)
Don’t set the editor to dark mode unless you set browser too. With screen bliking black and white, my eyes hurt. Thanks for great video though.
Thanks for the hint!
And what about the context? Is there a way to improve performance of that? Because since context update one of its values, the whole value gonna be considered as a new one, and all of the components that have hooked useContext will be rendered Iven they have memo on them
Thanks for a great question. I think this might be useful:
stackoverflow.com/questions/57030018/react-context-with-hooks-prevent-re-render
Hi, why not putting id, and value in callback dependencies ? so it will be triggered when the id or value changes.
Unless I misunderstood you, this way it will still rerender the whole component.
@@SoftwareDeveloperDiaries Got it, I don't code in hand.
id and value are probably of type 'String' or 'Number', which are both primitive types (includes string, number, boolean etc.) in JS. On each re-render of the parent, anything which is not a primitive data type - it could be an array, a function, or an object - all these are re-created (re-assigned a new reference/location/address in the memory) by the parent component because these are referenced by memory. All the primitive values are not re-created and hence, those do not change on the parent's re-render, which is why we don't need to 'cache' primitive values.
KING
Let's gooo 🤠
Handler shouldn't recreate if you lift it above the component, or?
Great point, it won't indeed! There are different opinions on this approach as well as small implications tho: stackoverflow.com/a/62925172
I never have to think about all these doing angular or vue.. never have any issue with performance or lagging.. only react.. whyyyy
Eheheheee
Helpfull video. I Nee help.
You get my sub and turn on bell
Happy to have you here!
Why not just take out the function out of the component instead of using useCallback
Indeed! There are different opinions on this approach as well as small implications tho: stackoverflow.com/a/62925172
Seems interesting but you speak wet, it's hard to focus
Thanks for the feedback, I'll try to improve it! 🙂
Spot the same
I think you mispronounced “use Svelte” 😂
Oh :D