![]() So including the Hook unnecessarily can result in both a slower app and with too much memory used. After all, the useMemo helps to improve the speed of your app at the expense of memory usage. ![]() However, instead of increasing performance, too much use of useMemo can have adverse effects on performance.Īccording to React Docs, React may choose to “forget” some previously memoized values in order to free memory for off-screen components. When To Useīecause this Hook is for performance optimization, you may be tempted to include it for every computational function or for every variable in your app. () => computeExpensiveValue(a, b), //1st arg: some functionĪnd that's the basics of useMemo! Let's take a look at when it's best to use this Hook. Then, declared the memoized value by wrapping its expensive function inside the useMemo Hook, along with its dependencies. Hence, this is a useful Hook for performance optimization as it avoids having to re-compute expensive functions on every render. On every render, if there are no changes in the values of the dependencies, then useMemo returns the memoized value without re-executing the expensive function in the first argument. The Hook takes in 2 arguments: a function and an array of dependencies. But instead of returning a memoized callback, it returns a memoized value. In our previous article on useCallback, we learnt the concept of memoization and how the useCallback Hook is used to memoized a callback function. In this article, let's look at the useMemo Hook. Welcome to A Look at React Hooks, a beginner-friendly series on React Hooks.
0 Comments
Leave a Reply. |