{"id":187937,"date":"2021-02-24T17:00:43","date_gmt":"2021-02-24T14:00:43","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-use-refs-in-react-cloudsavvy-it\/"},"modified":"2021-02-24T17:00:43","modified_gmt":"2021-02-24T14:00:43","slug":"how-to-use-refs-in-react-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/","title":{"rendered":"#How to Use Refs in React \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a288e1907e4e\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a288e1907e4e\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#The_Case_For_Refs\" >The Case For Refs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#Creating_a_Ref\" >Creating a Ref<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#Assigning_Refs_to_React_Components\" >Assigning Refs to React Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#Refs_and_Functional_Components\" >Refs and Functional Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#Using_Refs_Within_Functional_Components\" >Using Refs Within Functional Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#Callback_Refs\" >Callback Refs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-refs-in-react-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Use Refs in React \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-8770\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/320fa525975dcd73d87d71de862f3009\/p\/uploads\/2021\/01\/24b43beb.jpg\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Refs are a React feature which let you directly access DOM nodes created by a component\u2019s <code>render()<\/code> method. They provide a way to break out of React\u2019s declarative rendering so you can call browser APIs.<\/p>\n<p>When working with React, you usually declare what a component\u2019s DOM should look like using JSX:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> MyComponent <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>value<span class=\"sy0\">:<\/span> <span class=\"st0\">\"\"<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    handleChange <span class=\"sy0\">=<\/span> e <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>value<span class=\"sy0\">:<\/span> e.<span class=\"me1\">target<\/span>.<span class=\"me1\">value<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n            <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span>Hello World<span class=\"sy0\">!&lt;\/<\/span>h1<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>input\n                    onChange<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">handleChange<\/span><span class=\"br0\">}<\/span>\n                    value<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">value<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n            <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n        <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Internally, React transpiles the JSX to work out how to manipulate the DOM. It\u2019ll use browser functions such as <code>document.createElement()<\/code> and <code>document.<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>endChild()<\/code> to create the DOM structure you\u2019ve declared.<\/p>\n<p>This drastically simplifies the code you need to programmatically update the DOM. To modify elements, you change their props or update a component\u2019s state. React then calculates the differences and makes the DOM adjustments necessary.<\/p>\n<h2 id=\"the-case-for-refs\"><span class=\"ez-toc-section\" id=\"The_Case_For_Refs\"><\/span>The Case For Refs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You don\u2019t normally get to access the DOM nodes created by React. In the example above, we have no handle to the elements we\u2019ve created. This becomes problematic if you want to call a DOM API which can\u2019t be accessed declaratively via React props.<\/p>\n<p>Let\u2019s consider what happens if the user enters an invalid value into the text input. If they then clicked submit in a real form, it would be a good idea to show an error message and put the focus back into the text input. You can\u2019t do this without access to the input\u2019s DOM node. You need to call the <code>focus()<\/code> method on that element.<\/p>\n<p>Enter refs. Refs give you a first-class way to gain a \u201creference\u201d to React\u2019s DOM nodes. You can solve the focus issue by assigning a ref to the input. Refs are objects with a <code>current<\/code> property that contains the DOM node they refer to.<\/p>\n<h2 id=\"creating-a-ref\"><span class=\"ez-toc-section\" id=\"Creating_a_Ref\"><\/span>Creating a Ref<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Refs are usually created explicitly by calling <code>React.createRef()<\/code>. You then assign them to a component instance using the special <code>ref<\/code> prop. This isn\u2019t a real prop and can\u2019t be accessed by the component.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> DemoComponent <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    inputRef <span class=\"sy0\">=<\/span> React.<span class=\"me1\">createRef<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    focusInput <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">inputRef<\/span><span class=\"sy0\">?<\/span>.<span class=\"me1\">current<\/span>.<span class=\"me1\">focus<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n            <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>input ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">inputRef<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>button onClick<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">focusInput<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n            <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n        <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The ref gets assigned to the instance property <code>inputRef<\/code>. This is then handed to the <code>input<\/code> element by setting its <code>ref<\/code> prop. When the button is clicked, the <code>focusInput()<\/code> method gets called. This accesses the <code>current<\/code> property of the ref, which contains the input\u2019s actual DOM node. It can now call <code>focus()<\/code> to focus the text field.<\/p>\n<p>The <code>current<\/code> property of refs can be <code>null<\/code>. This occurs when the ref isn\u2019t assigned to a rendered DOM element. In this example, <code>inputRef.current<\/code> will be <code>null<\/code> until the <code>render()<\/code> method is called and the input picks up the ref. For this reason, the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\">optional chaining<\/a> operator (<code>?.<\/code>) is used in <code>focusInput()<\/code> to gracefully handle the scenario where the ref doesn\u2019t yet refer to anything.<\/p>\n<h2 id=\"assigning-refs-to-react-components\"><span class=\"ez-toc-section\" id=\"Assigning_Refs_to_React_Components\"><\/span>Assigning Refs to React Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The example above shows how refs work when used with plain HTML elements. You can also assign a ref to React component instances. This allows you to directly call methods defined by children you render.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> View <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n        error<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>    <span class=\"co1\">\/\/ Example!<\/span>\n    <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    formRef <span class=\"sy0\">=<\/span> React.<span class=\"me1\">createRef<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    focusForm <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">formRef<\/span><span class=\"sy0\">?<\/span>.<span class=\"me1\">current<\/span>.<span class=\"me1\">focusInput<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    submit <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">error<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n            alert<span class=\"br0\">(<\/span><span class=\"st0\">\"There was an error; check your input.\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"kw1\">this<\/span>.<span class=\"me1\">focusForm<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span>\n    <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n            <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>Form ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">formRef<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>Button onClick<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">submit<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n            <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n        <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"kw5\">class<\/span> Form <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    inputRef <span class=\"sy0\">=<\/span> React.<span class=\"me1\">createRef<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    focusInput<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">inputRef<\/span>.<span class=\"me1\">current<\/span><span class=\"sy0\">?<\/span>.<span class=\"me1\">focus<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>input ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">inputRef<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this scenario, the <code>current<\/code> property of the <code>formRef<\/code> in <code>View<\/code> doesn\u2019t refer to a DOM node. Instead, it references the <code>Form<\/code> component instance which has been rendered.<\/p>\n<p>You should take care when using this approach. Always pass data to child components via props, instead of using refs as a callback system.<\/p>\n<p><a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">General<\/a>ly, a ref should be used when direct DOM interaction is unavoidable. This remains true when assigning a ref to a React component instance. You shouldn\u2019t call arbitrary component methods via a ref.<\/p>\n<p>Our example meets this requirement \u2013 <code>Form<\/code> is a presentational component, whereas <code>View<\/code> is a complex container that could be rendering multiple forms. It needs to be able to set the focus to problematic fields, even though it\u2019s not directly rendering them. The solution is to use a component ref carefully, ensuring the usage is justified by a need to manipulate the DOM.<\/p>\n<h2 id=\"refs-and-functional-components\"><span class=\"ez-toc-section\" id=\"Refs_and_Functional_Components\"><\/span>Refs and Functional Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Functional components cannot receive refs. They don\u2019t have instances so there\u2019s nothing to assign the ref to. However, you <em>can<\/em> use forwarding to redirect a ref to a DOM component.<\/p>\n<p>Ref forwarding is an optional feature that lets a component pass a ref it receives to one of the children it renders. To forward a ref, wrap your component with a call to React\u2019s <code>forwardRef()<\/code> function:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> InputComponent <span class=\"sy0\">=<\/span> React.<span class=\"me1\">forwardRef<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>props<span class=\"sy0\">,<\/span> ref<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>\n    <span class=\"sy0\">&lt;<\/span>input ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>ref<span class=\"br0\">}<\/span> value<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>props.<span class=\"me1\">value<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n<span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><code>forwardRef()<\/code> accepts a function that should return a React component. The function will be called when it needs to render and will be passed two parameters: its props and its forwarded ref.<\/p>\n<h2 id=\"using-refs-within-functional-components\"><span class=\"ez-toc-section\" id=\"Using_Refs_Within_Functional_Components\"><\/span>Using Refs Within Functional Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although functional components can\u2019t directly receive refs, they can create them with the <code>useRef()<\/code> hook. This is equivalent to the <code>createRef()<\/code> method available in class components.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> InputComponent <span class=\"sy0\">=<\/span> props <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> ref <span class=\"sy0\">=<\/span> useRef<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>input ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>ref<span class=\"br0\">}<\/span> value<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>props.<span class=\"me1\">value<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Importantly, <code>useRef()<\/code> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/hooks-faq.html#is-there-something-like-instance-variables\">can be used for more<\/a> than just refs. Its real role is to provide a way of persisting data between calls to a functional component. It returns an object with a <code>current<\/code> property which React then maintains and restores each time the component renders.<\/p>\n<p>You can therefore use <code>useRef()<\/code> to persist arbitrary data in functional components. Set the <code>current<\/code> property of the returned object to the value you want to keep around.<\/p>\n<h2 id=\"callback-refs\"><span class=\"ez-toc-section\" id=\"Callback_Refs\"><\/span>Callback Refs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A final way to work with refs is via the \u201ccallback\u201d pattern. With this approach, you don\u2019t need to manually call <code>createRef()<\/code> or <code>useRef()<\/code>. Instead, you set the <code>ref<\/code> prop to a function that React will call during rendering. It\u2019ll pass the element\u2019s DOM node as the only argument to the function.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> CallbackRef <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>input ref<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>el <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">inputRef<\/span> <span class=\"sy0\">=<\/span> el<span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This is a more concise way of creating refs which are assigned to instance properties. Your function receives the DOM node directly \u2013 there\u2019s no <code>.current<\/code> to handle, unlike <code>createRef()<\/code>.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React Refs let you handle scenarios you couldn\u2019t resolve with declarative rendering alone. They\u2019re your route to direct DOM manipulation when working with forms, <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a> playback and animations. You\u2019ll also find yourself reaching for refs if you need to integrate a third-party JavaScript library that wasn\u2019t built for React.<\/p>\n<p>Although refs are flexible, you shouldn\u2019t overuse them. Before creating a ref, check your components to make sure you can\u2019t achieve your goal declaratively.<\/p>\n<p>Refs are a necessary part of React but they contradict the library\u2019s principles. Too many refs can quickly make your app complicated to maintain. They let you break the top-down data flow that props usually enforce.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9834\/how-to-use-refs-in-react\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Use Refs in React \u2013 CloudSavvy IT&#8221; Refs are a React feature which let you directly access DOM nodes created by a component\u2019s render() method. They provide a way to break out of React\u2019s declarative rendering so you can call browser APIs. When working with React, you usually declare what a component\u2019s DOM&#8230;<\/p>\n","protected":false},"author":1,"featured_media":187938,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/320fa525975dcd73d87d71de862f3009\/p\/uploads\/2021\/01\/24b43beb.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-187937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/187937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=187937"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/187937\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/187938"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=187937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=187937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=187937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}