How to use useRef() in React JS

Whenever we want to access data of input elements we use useState() hook to get input forms values or some other hooks, and this basically helps to manage to react states.

But not all the time we need to manage to react state, sometimes we just want to access the HTML element values for just reading purposes.

Refs are basically the reference to the Dom elements.

So if we want to get values of input fields without taking care of react states or without using useState(), then we can use Refs.

Let’s understand this with the help of code.

Here we created a component file with the name Refs.js, and we are calling this component inside the App.js file.

import './App.css';
import Refs from './Refs';

function App() {
  return (

export default App;

Now inside the Refs.js file, we have created a form with an input field for taking input as a username, this form is submitted when the user clicks on submit button, on submit of this form a method called submitData is executing.

First, let’s see the Refs.js file code and then understand it.

import React,{useRef} from 'react';
const Refs= ()=>{
    const username = useRef();
    const submitData=(event)=>{
    return (
        <form onSubmit={submitData}>
            <input type="text" placeholder='Enter Username' ref={username}/>
            <button type="submit">Submit</button><br/>
export default Refs;

Before doing anything first we need to import this useRef hook and we have to assign it to a constant variable username.

const username = useRef();

This username is referencing the input type text filed with this property ref={username}

<input type="text" placeholder='Enter Username' ref={username}/>

Now submitData function we are displaying this reference variable value.

As it is an HTML DOM reference variable, it has many properties, and it returns an object with different properties.

We can access this variable value by its properties, username.current.value

So whatever we write inside the input text we can get that value by using this username.current.value

Here is the output which helps you to visualize the actual work.

On the above image, you can see we console the username and we got this object which has a current property that has a value property so by consoling username.current.value we can get the name we have entered in the input field.

Controlled and Uncontrolled components :

So basically component which uses useState or other hooks to manage to react states is a controlled component and which uses Refs for getting the value of input fields is uncontrolled components because with Refs we cannot manage to react states.

Related Posts

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

react js icon

What is Redux? What is action, reducer and store in Redux

In this blog we will discus about the redux, what is Redux and how you can use it in React application. What is Redux? Redux is a…

react js icon

What is useEffect Hook? How to Fetch data from API using useEffect

useEffect hook is used to manage side effects that are not related to component rendering. Mostly useEffect hook is used for managing console logs, animations, loading data,…

react js icon

What is useReducer Hook? What is the difference between useState and useReducer Hooks?

useReudcer hook takes the current state and returns a new state, it is used for state management. With useReducer, we can directly call the function inside the…

react js icon

Creating React JS App without using npx create-react-app command

It’s easy to create a react application by just running npx create-react-app project_name command, do you know what are the basic requirements for creating a react application…

react js icon

What is the useState() hooks in React JS | How to use useState() hook in React JS

Hooks are very important in react js and the most common hook is the useState Hook. In this blog, we will look into the functionality of this…

Leave a Reply

Your email address will not be published. Required fields are marked *