With the release of 16.8 in React, a new hook has been introduced named ‘useRef’. The useRef hook allows the developer to create a direct reference to the DOM element. With refs, React allows you to create React element references. This hook was meant to be used in functional components but can be used in class-based components with React.createRef() method. The useRef can be used by calling React.useRef() method and attaching a React element to it using the ref attribute on the element. This function returns a mutable reference object.
Code snippet:
const refContainer = React.useRef(initialValue);The initialValue argument defines the initial value of the reference object. This initial value could be used as the current value in the React element. The returned object has a property named ‘current’ which can be used to perform multiple operations with that element. This current property can be initialized to the passed argument initialValue e.g. useRef(initialValue). The useRef() only returns one item at a time which is the current object. The refContainer object can persist the value for the lifetime of the react element.
Figure 1.0 Explaining the flow of useRef current object.
Example 1:
Let’s take an example to make a counter using React.useRef().
In the example above, a button is created to make a counter of 1 in the value of an element created using React.useRef() method. The initial value is set to 0 which will be incremented at the click of a button. Using the counter property of counterRef we can use the current value of the defined ref element.
Output:
Live Link: https://codesandbox.io/s/gallant-sun-e01lq8?file=/src/App.js
Example 2:
Let’s take another example and dig down how we can use useRef in the manipulation of Forms.
For the sake of example let’s take a simple login form having some input fields and a button to submit the form. The above example demonstrates how you can use useRef in the form element. With this, you can pass this reference to any child element using props and call its methods/properties in the child element’s implementation. i.e; you can submit the form in the child element. Note: to use useRef in the child component .current property will be called.
Output:
Live Link: https://codesandbox.io/s/nice-firefly-r4dxpd?file=/src/App.js
Furthermore, to use useRef in class-based components we have to call in its constructor and assign it to the class’s property using this keyword. For that, in the class component, you need to bind it with ‘this’. Following is the snippet to achieve that:
How things worked before useRef?
Before the release of the useRef method, useState & useReducer were used to achieve useRef’s functionalities. While useState and useReducer hooks are the React Hooks to use local state in React components, they can also come at the cost of being called too often making the component to rerender for each call made to the update functions.
The best thing about useRef:
It does not cause rerenders.
Conclusion:
Hopefully, this article gives you a good understanding of how powerful useRef can be. Refs are the best and most efficient to update the part of a component without re-rendering the whole component. That’s commodious for writing leaner code & getting better performance.