{"id":5773,"date":"2022-10-05T09:34:06","date_gmt":"2022-10-05T09:34:06","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5773"},"modified":"2022-10-17T13:39:18","modified_gmt":"2022-10-17T13:39:18","slug":"how-to-use-useref-hook-efficiently-react","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/","title":{"rendered":"How to use useRef hook efficiently? – React"},"content":{"rendered":"\n

With the release of 16.8 in React, a new hook has been introduced named \u2018useRef<\/code>\u2019. The useRef<\/code> hook allows the developer to create a direct reference to the DOM element. With refs, React allows you to create React element references. This hook was meant to be used in functional components but can be used in class-based components with React.createRef()<\/code> method. The useRef<\/code> can be used by calling React.useRef()<\/code> method and attaching a React element to it using the ref attribute on the element. This function returns a mutable reference object.<\/p>\n\n\n\n

Code snippet:<\/strong><\/p>\n\n\n\n

const refContainer = React.useRef(initialValue);<\/code><\/pre>\n\n\n\n
The initialValue<\/code> argument defines the initial value of the reference object. This initial value could be used as the current value in the React element. The returned object has a property named \u2018current\u2019 which can be used to perform multiple operations with that element. This current property can be initialized to the passed argument initialValue e.g. useRef(initialValue)<\/code>. The useRef()<\/code> only returns one item at a time which is the current object. The refContainer<\/code> object can persist the value for the lifetime of the react element.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Figure 1.0 Explaining the flow of useRef current object.<\/strong><\/p>\n\n\n\n
Example 1:<\/strong><\/p>\n\n\n\n
Let\u2019s take an example to make a counter using React.useRef()<\/code>.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
In the example above, a button is created to make a counter of 1 in the value of an element created using React.useRef()<\/code> method. The initial value is set to 0 which will be incremented at the click of a button. Using the counter property of counterRef<\/code> we can use the current value of the defined ref element.<\/p>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Live Link:<\/strong> https:\/\/codesandbox.io\/s\/gallant-sun-e01lq8?file=\/src\/App.js<\/a><\/p>\n\n\n\n
Example 2:<\/strong><\/p>\n\n\n\n
Let\u2019s take another example and dig down how we can use useRef in the manipulation of Forms.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
For the sake of example let\u2019s take a simple login form having some input fields and a button to submit the form. The above example demonstrates how you can use useRef in the form element. With this, you can pass this reference to any child element using props and call its methods\/properties in the child element\u2019s implementation. i.e; you can submit the form in the child element. Note: to use useRef in the child component .current property will be called.<\/p>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Live Link:<\/strong> https:\/\/codesandbox.io\/s\/nice-firefly-r4dxpd?file=\/src\/App.js<\/p>\n\n\n\n
Furthermore, to use useRef in class-based components we have to call in its constructor and assign it to the class\u2019s property using this keyword. For that, in the class component, you need to bind it with \u2018this\u2019. Following is the snippet to achieve that:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
How things worked before useRef?<\/strong><\/p>\n\n\n\n
Before the release of the useRef<\/code> method, useState<\/code> & useReducer<\/code> were used to achieve useRef\u2019s functionalities. While useState and useReducer<\/code> hooks are the React Hooks to use local state in React components, they can also come at the cost of being called too often making the component to rerender for each call made to the update functions.<\/p>\n\n\n\n
The best thing about useRef:<\/strong><\/p>\n\n\n\n
It does not cause rerenders.<\/p>\n\n\n\n
Conclusion:<\/strong><\/p>\n\n\n\n
Hopefully, this article gives you a good understanding of how powerful useRef can be. Refs are the best and most efficient to update the part of a component without re-rendering the whole component. That\u2019s commodious for writing leaner code & getting better performance.<\/p>\n","protected":false},"excerpt":{"rendered":"
With the release of 16.8 in React, a new hook has been introduced named \u2018useRef\u2019. The useRef hook allows the developer to create a direct reference to the DOM element. With refs, React allows you to create React element references. This hook was meant to be used in functional components but can be used in … Continue reading “How to use useRef hook efficiently? – React”<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":5771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[37,67,32,63],"class_list":["post-5773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-development","tag-hooks","tag-react-native","tag-reactjs"],"acf":[],"yoast_head":"\nHow to use useRef hook efficiently? - React - Mobile App Development Services<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use useRef hook efficiently? - React - Mobile App Development Services\" \/>\n<meta property=\"og:description\" content=\"With the release of 16.8 in React, a new hook has been introduced named \u2018useRef\u2019. The useRef hook allows the developer to create a direct reference to the DOM element. With refs, React allows you to create React element references. This hook was meant to be used in functional components but can be used in … Continue reading "How to use useRef hook efficiently? – React"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-05T09:34:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-17T13:39:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2180\" \/>\n\t<meta property=\"og:image:height\" content=\"1230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"How to use useRef hook efficiently? – React\",\"datePublished\":\"2022-10-05T09:34:06+00:00\",\"dateModified\":\"2022-10-17T13:39:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\"},\"wordCount\":537,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png\",\"keywords\":[\"development\",\"hooks\",\"react-native\",\"reactjs\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\",\"name\":\"How to use useRef hook efficiently? - React - Mobile App Development Services\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png\",\"datePublished\":\"2022-10-05T09:34:06+00:00\",\"dateModified\":\"2022-10-17T13:39:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png\",\"width\":2180,\"height\":1230},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use useRef hook efficiently? – React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use useRef hook efficiently? - React - Mobile App Development Services","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/","og_locale":"en_US","og_type":"article","og_title":"How to use useRef hook efficiently? - React - Mobile App Development Services","og_description":"With the release of 16.8 in React, a new hook has been introduced named \u2018useRef\u2019. The useRef hook allows the developer to create a direct reference to the DOM element. With refs, React allows you to create React element references. This hook was meant to be used in functional components but can be used in … Continue reading \"How to use useRef hook efficiently? – React\"","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/","og_site_name":"Mobile App Development Services","article_published_time":"2022-10-05T09:34:06+00:00","article_modified_time":"2022-10-17T13:39:18+00:00","og_image":[{"width":2180,"height":1230,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png","type":"image\/png"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"How to use useRef hook efficiently? – React","datePublished":"2022-10-05T09:34:06+00:00","dateModified":"2022-10-17T13:39:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/"},"wordCount":537,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png","keywords":["development","hooks","react-native","reactjs"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/","name":"How to use useRef hook efficiently? - React - Mobile App Development Services","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png","datePublished":"2022-10-05T09:34:06+00:00","dateModified":"2022-10-17T13:39:18+00:00","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/10\/Screen-Shot-2022-10-05-at-2.29.11-PM.png","width":2180,"height":1230},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-use-useref-hook-efficiently-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"How to use useRef hook efficiently? – React"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5773"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5773"}],"version-history":[{"count":1,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5773\/revisions"}],"predecessor-version":[{"id":5774,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5773\/revisions\/5774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5771"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}