React Hooks: useMemo
Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.
He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇
Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices
If you want to reach out with him, here is how you can do it;
🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/
Thanks for reading ✨
1. Problem
In the lifecycle of a component, React re-renders the component when an update is made. When React checks for any changes in a component, it may detect an unintended or unexpected change due to how JavaScript handles equality and shallow comparisons. This change in the React application will cause it to re-render unnecessarily.
{% codesandbox jjxypyk86w %}
If one part re-renders, it re-renders the entire component tree.
2. Memoization
Memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.
If we have a function compute 1 + 1, it will return 2. But if it uses memoization, the next time we run 1’s through the function, it won’t add them up; it will just remember the answer is 2 without executing the adding function.
3. Syntax
From the official React documentation, syntax is looking like this;
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useMemo takes in a function and an array of dependencies.
useMemo hook will run the expensive operation when one of the dependencies has been changed. If no changes has been made it will return stored value.
4. Example
Here is an example of useMemo in action.
const memoizedList = useMemo(() => {
return userList.map(user => {
return {
...user,
name: someExpensiveOperation(user.name)
}
})
}, [userList])
5. Use right hook
In addition to useMemo, there is also useCallback and useEffect which can be used similar situations
The useCallback hook is similar to useMemo, but it returns a memoized function rather than memoized value.
If your dependencies array is not provided, there is no possibility of memoization, and it will compute a new value on every render. So in this reason you can go ahead with useEffect
// useMemo - returns -> memoized value
const memoizedValue = useMemo(() => expensiveFunction(a,b), [a,b])
// useCallback - returns -> memoized function
const memoizedCallback = useCallback(() => {
doSomething(a, b);
},
[a, b]
);
