{"id":60076,"date":"2024-01-21T20:25:31","date_gmt":"2024-01-21T14:55:31","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60076"},"modified":"2024-01-31T20:30:16","modified_gmt":"2024-01-31T15:00:16","slug":"using-reacts-usememo-hook","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/using-reacts-usememo-hook\/","title":{"rendered":"Using React\u2019s useMemo Hook"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p>React has many built-in useful hooks that you can use in your application. With the release of React 16.8 introduces a new hook that is useMemo. This hook improves the performance of your application.<\/p>\n<h2><strong>What Is useMemo()<\/strong><\/h2>\n<p>useMemo() hook in React significantly improves the performance of your components. This hook is designed to optimize expensive calculations. The useMemo hook memoizes values in our React application. It enables the caching of a function&#8217;s result, triggering a recalculation only when the specified dependencies have changed.<\/p>\n<pre><em><strong>Syntax:<\/strong><\/em> The \u2018useMemo\u2019 hook takes two arguments: eg- const memoizeValue = useMemo(() =&gt; {\/* function *\/}, [\/* Dependencies *\/]);<\/pre>\n<p><em><strong>1. calculateValue(1st argument as a function):-<\/strong><\/em> It&#8217;s a function that performs complex and expensive calculations.<\/p>\n<p><em><strong>2. dependencies(2nd argument as an array):-<\/strong><\/em> The array of dependencies serves as the second argument for useMemo. These dependencies dictate whether the memoized value requires recalculation. If any of these dependencies change, the function invokes a new one, leading to the computation and caching of a fresh value.<\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/withoutUseMemo.png\" \/><\/p>\n<p>In the above code, we are checking number is prime or not. There are two input fields above the code first input field checks whether the number is prime or not, and the second one stores the name.<\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/checkNumberWithouseUseMemo.png\" \/><\/p>\n<p>The above function is called, and a number is passed in this function to check whether the number is prime or not.<\/p>\n<p>\/blog\/wp-ttn-blog\/uploads\/2024\/01\/screen-capture-3.webm<\/p>\n<p>In the above video, you can see logs <strong>checking the prime number<\/strong> and <strong>your Name,<\/strong> The Problem is that If you type the name field, the name state will update and always re-render the component and execute the checkThePrimeNumber function every time. You can see in the log.<\/p>\n<p>As you know <strong>checkNumberIsPrimeOrNot<\/strong> is an expensive function and it&#8217;s executing every time. We can fix this with the help of built-in use that is <strong>useMemo(). <\/strong>First Import the hook.<\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/Screenshot-2024-01-16-at-5.13.57-PM.png\" \/><\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/checkNumberWithUseMemo.png\" \/><\/p>\n<p>In the above code, we use useMemo to memoize the value. Whenever the value of dependency again, it memoizes the value.<\/p>\n<p>\/blog\/wp-ttn-blog\/uploads\/2024\/01\/screen-capture-4.webm<\/p>\n<p>In the above Video, whenever updating the state of the name, the expensive checkThePrimeNumber function is not executing. You can see in the log.<\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/withuseMemo.png\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>To avoid the unnecessary re-renders of the component and improve the performance. The useMemo() is the most powerful optimization technique. It helps in caching the result to improve the performance.<\/p>\n<p>Thanks for reading! Check out our other blog posts for more insights.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Introduction React has many built-in useful hooks that you can use in your application. With the release of React 16.8 introduces a new hook that is useMemo. This hook improves the performance of your application. What Is useMemo() useMemo() hook in React significantly improves the performance of your components. This hook is designed to optimize [&hellip;]<\/p>\n","protected":false},"author":1709,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":12},"categories":[3038],"tags":[4857,5610],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60076"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1709"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60076"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60076\/revisions"}],"predecessor-version":[{"id":60163,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60076\/revisions\/60163"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}