{"id":4004,"date":"2022-03-26T10:56:36","date_gmt":"2022-03-26T10:56:36","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=4004"},"modified":"2022-05-04T07:05:21","modified_gmt":"2022-05-04T07:05:21","slug":"what-is-a-ref-how-do-you-use-it","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/","title":{"rendered":"What is a ref ? How do you use it ?"},"content":{"rendered":"<ul>\n<li style=\"text-align: justify;\">It is a function provided by React to access the DOM element and the React element that you might have created on your own.<\/li>\n<li style=\"text-align: justify;\">In React, a ref is a <strong>reference to a DOM element.<\/strong><\/li>\n<li style=\"text-align: justify;\">It can be immediately placed in a variable.<\/li>\n<li style=\"text-align: justify;\">They are created with the help of useRef<\/li>\n<li style=\"text-align: justify;\">This variable is then passed to a given React element (not a component) to get a reference to the underlying DOM element (that is, div, span, and so on).<\/li>\n<li style=\"text-align: justify;\">Properties are now available on the element itself.<\/li>\n<li style=\"text-align: justify;\">Refs are often referred to as an \u201cescape hatch\u201d to be able to work with a DOM element directly.<\/li>\n<li style=\"text-align: justify;\">They allow us to do certain operations that can\u2019t be done through React otherwise, such as clearing or focusing an input.<\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-4276 aligncenter\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png\" alt=\"\" width=\"758\" height=\"483\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png 758w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref-300x191.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref-390x249.png 390w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/p>\n<p><strong>For Example,<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">\/\/ using refs<br\/><br\/>class App extends React.Component {<br\/><br\/>\u00a0constructor(){<br\/><br\/>\u00a0\u00a0super();<br\/><br\/>\u00a0\u00a0this.state = { sayings: &quot;&quot;};<br\/><br\/>\u00a0}<br\/><br\/>\u00a0update(e){<br\/><br\/>\u00a0\u00a0this.setState({ sayings: this.refs.anything.value});<br\/><br\/>\u00a0}<br\/><br\/>\u00a0render(){<br\/><br\/>\u00a0\u00a0return (<br\/><br\/>\u00a0\u00a0\u00a0<div><br\/><br\/>\u00a0\u00a0\u00a0\u00a0Welcome to Kaashiv <input type=&quot;text&quot; ref=&quot;anything&quot;<br\/><br\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange = {this.update.bind(this)}\/><br\/><br\/>\u00a0\u00a0\u00a0<br\/><br\/><br\/>\u00a0\u00a0\u00a0<em>{this.state.sayings}<\/em><br\/><br\/>\u00a0\u00a0<\/div><br\/><br\/>\u00a0\u00a0);<br\/><br\/>\u00a0}<br\/><br\/>}<br\/><br\/>\u00a0ReactDOM.render(< App \/>, document.getElementById(&#039;root&#039;));<br\/><br\/>\u00a0<\/code><\/pre> <\/div>\n<p><strong>\u00a0Output:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4020 size-full\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-ref..png\" alt=\"\" width=\"398\" height=\"203\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-ref..png 398w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-ref.-300x153.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/what-is-ref.-390x199.png 390w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is a function provided by React to access the DOM element and the React element that you might have created on your own. In React, a ref is a reference to a DOM element. It can be immediately placed in a variable. They are created with the help of useRef This variable is then [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16542],"tags":[16769,16770,16773,16774,16772,16766,16771,16761,16764,16762,16767,16757,16763,16775,16765,16758,16759,16760,16768],"class_list":["post-4004","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-example-of-ref-in-react","tag-how-does-ref-work-in-react","tag-how-to-add-ref-in-react","tag-how-to-clear-ref-in-react","tag-how-to-create-ref-in-react","tag-react-get-element-by-id-functional-component","tag-react-useref","tag-ref-in-react","tag-ref-in-react-example","tag-ref-in-react-functional-component","tag-ref-react-hooks","tag-refs-and-the-dom","tag-use-ref-in-react","tag-use-ref-in-react-example","tag-useref-in-react","tag-what-is-ref-in-react","tag-what-is-ref-in-react-hook","tag-what-is-ref-in-react-hook-form","tag-what-is-ref-used-for-in-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is a ref ? How do you use it ? - React Interview Questions<\/title>\n<meta name=\"description\" content=\"What is a ref ? How do you use it ? - It is a function provided by React to access the DOM element and the React element that you might have created on your own.\" \/>\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.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a ref ? How do you use it ? - React Interview Questions\" \/>\n<meta property=\"og:description\" content=\"What is a ref ? How do you use it ? - It is a function provided by React to access the DOM element and the React element that you might have created on your own.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-26T10:56:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-04T07:05:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/\"},\"author\":{\"name\":\"webmaster\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"headline\":\"What is a ref ? How do you use it ?\",\"datePublished\":\"2022-03-26T10:56:36+00:00\",\"dateModified\":\"2022-05-04T07:05:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/\"},\"wordCount\":359,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/reactjs-ref.png\",\"keywords\":[\"example of ref in react\",\"how does ref work in react\",\"how to add ref in react\",\"how to clear ref in react\",\"how to create ref in react\",\"react get element by id functional component\",\"react useref\",\"ref in react\",\"ref in react example\",\"ref in react functional component\",\"ref react hooks\",\"Refs and the DOM\",\"use ref in react\",\"use ref in react example\",\"useref in react\",\"what is ref in react\",\"what is ref in react hook\",\"what is ref in react hook form\",\"what is ref used for in react\"],\"articleSection\":[\"ReactJS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/\",\"name\":\"What is a ref ? How do you use it ? - React Interview Questions\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/reactjs-ref.png\",\"datePublished\":\"2022-03-26T10:56:36+00:00\",\"dateModified\":\"2022-05-04T07:05:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"What is a ref ? How do you use it ? - It is a function provided by React to access the DOM element and the React element that you might have created on your own.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/what-is-a-ref-how-do-you-use-it\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/reactjs-ref.png\",\"contentUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/reactjs-ref.png\",\"width\":758,\"height\":483},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\"],\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/author\\\/webmaster\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is a ref ? How do you use it ? - React Interview Questions","description":"What is a ref ? How do you use it ? - It is a function provided by React to access the DOM element and the React element that you might have created on your own.","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.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/","og_locale":"en_US","og_type":"article","og_title":"What is a ref ? How do you use it ? - React Interview Questions","og_description":"What is a ref ? How do you use it ? - It is a function provided by React to access the DOM element and the React element that you might have created on your own.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/","og_site_name":"Wikitechy","article_published_time":"2022-03-26T10:56:36+00:00","article_modified_time":"2022-05-04T07:05:21+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png","type":"","width":"","height":""}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/#article","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/"},"author":{"name":"webmaster","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"headline":"What is a ref ? How do you use it ?","datePublished":"2022-03-26T10:56:36+00:00","dateModified":"2022-05-04T07:05:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/"},"wordCount":359,"commentCount":0,"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png","keywords":["example of ref in react","how does ref work in react","how to add ref in react","how to clear ref in react","how to create ref in react","react get element by id functional component","react useref","ref in react","ref in react example","ref in react functional component","ref react hooks","Refs and the DOM","use ref in react","use ref in react example","useref in react","what is ref in react","what is ref in react hook","what is ref in react hook form","what is ref used for in react"],"articleSection":["ReactJS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/","name":"What is a ref ? How do you use it ? - React Interview Questions","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png","datePublished":"2022-03-26T10:56:36+00:00","dateModified":"2022-05-04T07:05:21+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"What is a ref ? How do you use it ? - It is a function provided by React to access the DOM element and the React element that you might have created on your own.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/what-is-a-ref-how-do-you-use-it\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/03\/reactjs-ref.png","width":758,"height":483},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=4004"}],"version-history":[{"count":4,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4004\/revisions"}],"predecessor-version":[{"id":4277,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4004\/revisions\/4277"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=4004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=4004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=4004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}