{"id":4978,"date":"2024-11-19T23:40:01","date_gmt":"2024-11-19T18:10:01","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=4978"},"modified":"2024-11-19T23:40:02","modified_gmt":"2024-11-19T18:10:02","slug":"hooks-usememo-usecallback-useref","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/hooks-usememo-usecallback-useref\/","title":{"rendered":"Hooks : useMemo, useCallback &amp; useRef"},"content":{"rendered":"<h1><strong class=\"ql-font-serif\">useMemo<\/strong><\/h1>\n<p><em class=\"ql-font-serif ql-size-large\">It is a react hook that lets you cache the calculation results between re-renders.<\/em><\/p>\n<p><\/p>\n<ul>\n<li><em class=\"ql-font-serif ql-size-large\">Problem \u21d2 React renders the component on every state change so if we are doing some heavy operation it will render the component with the whole operation on every small change also. <\/em><\/li>\n<li><em class=\"ql-font-serif ql-size-large\">Solution \u21d2 Such type of issue can be solved with the help of <\/em><strong class=\"ql-font-serif ql-size-large\"><em>memoization or useMemo.<\/em><\/strong><em class=\"ql-font-serif ql-size-large\"> <\/em><\/li>\n<li><em class=\"ql-font-serif ql-size-large\">That means it caches the heavy operations calculations between every re-renders.<\/em><\/li>\n<\/ul>\n<p><\/p>\n<h1><strong class=\"ql-font-serif\">useCallback<\/strong><\/h1>\n<p><em class=\"ql-font-serif ql-size-large\">It is a react hook that lets you cache a function definition between re-renders.<\/em><\/p>\n<p><\/p>\n<h1><strong class=\"ql-font-serif\">useRef<\/strong><\/h1>\n<p><em class=\"ql-font-serif ql-size-large\">It is a react hook that lets you reference a value that\u2019s not needed for rendering.<\/em><\/p>\n<p><em class=\"ql-font-serif ql-size-large\">When you want a value in a variable in your component but you don\u2019t want that value to re-render. You can tell about this by giving the difference between let, state, and ref variables. <\/em><\/p>\n<ul>\n<li class=\"ql-indent-1\"><strong class=\"ql-font-serif ql-size-large\"><em>let <\/em><\/strong><em class=\"ql-font-serif ql-size-large\">\u21d2 will not render the component but if you change its value using any function it will change its value but not update the UI, and also whenever the component re-render it will reset its value to which it was assigned. <\/em><\/li>\n<li class=\"ql-indent-1\"><strong class=\"ql-font-serif ql-size-large\"><em>state<\/em><\/strong><em class=\"ql-font-serif ql-size-large\"> \u21d2 will render the component on every state change of variable or value change, and also updates the UI with every re-render also it stores the value and doesn\u2019t reset it on re-render. <\/em><\/li>\n<li class=\"ql-indent-1\"><strong class=\"ql-font-serif ql-size-large\"><em>ref<\/em><\/strong><em class=\"ql-font-serif ql-size-large\"> \u21d2 will not render the component but if you change its value using the function it will update the value behind the scene and store it, but will not update UI as it is not re-rendering the component. but once you re-render the component it will show you the updated value.<\/em><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>useMemo It is a react hook that lets you cache the calculation results between re-renders. Problem \u21d2 React renders the component on every state change so if we are doing some heavy operation it will render the component with the whole operation on every small change also. Solution \u21d2 Such type of issue can be<\/p>\n","protected":false},"author":48,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[172,263,355,354],"tags":[330,224],"class_list":["post-4978","post","type-post","status-publish","format-standard","category-javascript","category-javascript-frameworks","category-react19","category-reactjs19","tag-javascript","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4978"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4978\/revisions"}],"predecessor-version":[{"id":4999,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4978\/revisions\/4999"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}