{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/usage-of-the-useref-hook-in-react/", "result": {"data":{"markdownRemark":{"html":"

In React, we use refs to access and manipulate DOM nodes.

\n

Creating refs

\n

In function components, we can create refs using the useRef() hook.

\n

useRef() creates a JavaScript object that has a current property.

\n

Accessing refs

\n

After creating refs, we attach them to React elements that we want to get access to, using the ref attribute. Then we can access the underlying DOM node at the ref’s current property.

\n

Use cases

\n

One of the good use cases of using refs is to manage focus.

\n

Let’s say you have an application in which you have a Login component that renders a login form. Whenever the Login page loads, you want the email input box to be always in autofocus. We can achieve this using refs.

\n

Below, we have a Login component, styled using Bootstrap classes.

\n
src/components/Login.js
\n
import React from "react";\n\nconst Login = () => {\n\n  return (\n    <div className="col-md-4 mx-auto mt-5">\n      <form>\n        <div className="form-group mb-3">\n          <label for="inputEmail">Email Address</label>\n          <input\n            type="email"\n            id="inputEmail"\n            className="form-control"\n            placeholder="Enter Email"\n          />\n        </div>\n        <div className="form-group mb-3">\n          <label for="inputPassword">Password</label>\n          <input\n            type="password"\n            id="inputPssword"\n            className="form-control"\n            placeholder="Enter Password"\n          />\n        </div>\n        <button type="submit" className="btn btn-primary">\n          Submit\n        </button>\n      </form>\n    </div>\n  );\n};\n\nexport default Login;
\n

The Login component when rendered looks like this:

\n

\n \n \n \n \n

\n

LINE 20: We associate inputEmailRef to the email input element by passing it as the value of the ref attribute.

\n

LINE 8: Inside useEffect(), we use the focus() method to add focus to the email input box. Now, whenever the Login component mounts, React will assign the current property to the DOM element.

\n

Now, whenever the Login page loads, the email input box will always be in autofocus.

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n .synthwave-84 { background-color: #262335; }\n .synthwave-84 .mtk8 { color: #72F1B8; }\n .synthwave-84 .mtk1 { color: #FFFFFF; }\n .synthwave-84 .mtk3 { color: #FF7EDB; }\n .synthwave-84 .mtk10 { color: #FEDE5D; }\n .synthwave-84 .mtk16 { color: #FF8B39; }\n .synthwave-84 .mtk6 { color: #36F9F6; }\n .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n .synthwave-84 .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n","frontmatter":{"title":"Usage of the useRef() Hook in React","date":"2021-06-26"}}},"pageContext":{"slug":"/usage-of-the-useref-hook-in-react/","prev":{"fields":{"slug":"/useful-lodash-methods/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-3/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}