React useRef Hook

In this part, we will learn about react useRef hook. React useRef hook is a special function which allows us to manipulate or change directly to DOM using reference and functional component without re-rendering the component. It is pretty useful when we are creating large application.

Syntax

const refContainer = useRef(initialValue);

This is the syntax where useRef function will return a reference object of DOM which is mutable. This object has a property called .current. It is the function which takes only argument which is initial value and returns an object, with the help of this object we can change the DOM element.

NOTE: If you pass nothing like react useRef() then it will remain undefined, So better practice is to add null as an argument if you don’t need anything by default useRef(null)

What Purpose Does React useRef Hook Serve?

Some of the use cases of React useRef hook are:

1. To access DOM elements
2. To persist values in successive renders

To access DOM elements

This one is the most common use case of useRef is to access DOM element as we discussed earlier.

So let’s take a simple example to understand this thing:

import React, {Fragment, useRef} from 'react';

function App() {

// Creating a ref object using useRef hook
const focusPoint = useRef(null);
const onClickHandler = () => {
	focusPoint.current.value = "1000";
	focusPoint.current.focus();
	focusPoint.current.style.color = "red";
};
return (
	<Fragment>
	<div>
		<button onClick={onClickHandler}>
		ACTION
		</button>
	</div>
	<label>
	Click on the action button to
	focus and populate the text.
	</label><br/>
	<textarea ref={focusPoint} />
	</Fragment>
);
};

export default App;

In the above example, we have to import the useRef hook. After that, we have created an object using useRef(), and as discussed we have to pass something in initial value, so we have passed “null” as an argument. Now we have created a text field, in this field we want to access the useRef to change values or something, So for that we have passed ref object to the text field using ref.

Now, we have a button here, in which we are calling the function onClickHandler . In this function, we have added a string of 1000 using current.value, and also we have changed its color to red.

Output

To persist values in successive renders

There are many situations may occur when you need to persist or keep up the certain value in consecutive renders. So instead of storing these value in the state, we can store it in the useRef as a value. It is needed because storing these values in the state may cause unnecessary renders, Also if we want to determine state value from previous state then it is recommended to use useRef hook.

Note:

It is worth pointing out that createRef and useRef hook can be used for creating ref in functional components. However, refs created using createRef are not persisted between re-renders. A new ref is always created whenever the component is re-rendered.

You should also note that React will not be notified of any changes to a component’s ref.