Let's say we're making a webpage where we want to draw a smiley face every time we click a button.
But drawing that smiley takes a lot of compute...
For further actions, you may consider blocking this person and/or reporting abuse
Nice! I guess one of the key reasons that this is important is that if you pass the function as a prop to a child component, that child component will not re-render every time as the function doesn't keep changing each render.
Thank you for the insightful explanation of how useCallback works in React. The analogy of the magic notebook for the robot friend effectively communicates the concept of memoization and optimization of function re-creation.
The use of useCallback to memoize the drawSmiley function is a great example of how we can optimize performance by preventing unnecessary re-creation of the function on every render. This can be particularly useful in scenarios where the function is passed down to child components, ensuring that they don't re-render unless the dependencies change.
The analogy of the robot using the magic notebook to build a sandcastle efficiently, while updating its instructions based on changes, is a clever way to illustrate the benefits of memoization. It helps to make the concept more accessible and relatable, especially for those who are new to the idea of memoization in React.
Overall, it's a well-written explanation that effectively communicates the benefits of using useCallback in React to optimize performance. Thank you for sharing this insightful analogy!
Thank you :)
Let's gooo! 🙌
haha you already know
I still loved the simple drawing analogy, also a good refresher, had forgotten there is such a hook 😂
I've been struggling with this problem for a while, and your article provided the clarity I needed to move forward. Thank you!
This made my entire day, you're welcome
Nice docs.
Unfortunately, this example doesn't showcase memorization of the function in any logical way.
To demonstrates the behaviour correctly, create a custom
MyCustomButtoncomponent and see how many times each of the buttons update.Also, without React.memo the
MyCustomButtonwill also keep updating.I don't mean to be bashing this post, but with the misleading title like you have posted, will be mislead.
You're absolutely correct—without React.memo, components will continue to update unnecessarily.
My initial focus was solely on implementing useCallback in the simplest manner possible for kids to understand without introducing other concepts.
However, I've since revised the code to include memo to enhance its accuracy.
Since we are already nitpicking, it's .memoize not memorize. I would hate for anyone who came here trying to learn about memoization techniques in React to be confused by your comment.
hahaha....i agree, his comment was nitpicking ...thanks for having my back there
didn't understand the dependency part clearly
No problem, it can take some time to get the hang of it:)
okay, so :
The twist in our dependency scenario involves adding a condition that, when changed, forces the function to "forget" its cached result and recompute it, possibly with adjustments based on the new condition.
For example, imagine we have a function that builds a sandcastle.
This function will memoize its result (the completed sandcastle) unless a specific condition changes (like the weather).
If the weather changes (from sunny to rainy), the function must re-run and adjust its process (because how you build sandcastle in sunny weather is different in rainy weather. Maybe you need to cover it or stop in rainy weather).
So in our case, weather is the dependency, because it dictates the running of our function.
Understood now, Thank you 💐
my pleasure :)