useRef hooks in React Js
React is a popular JavaScript library for building user interfaces, and it provides several tools and hooks to help developers create efficient and performant components. One of these hooks is the useRef hook, which allows you to create a mutable reference to an element or value, and persist it across re-renders.
In this blog, we will explore the useRef hook in React, how it works, and how you can use it in your applications with examples.
What is useRef?
The useRef hook in React is a built-in hook that returns a mutable object with a current property that can be used to store and persist data between renders. useRef is similar to useState in that it allows you to store and update state, but it has some key differences.
Unlike useState, useRef does not trigger a re-render when the value of the reference changes. Instead, useRef is useful when you want to access the current value of an element or variable directly, without triggering a re-render. This makes it useful for storing and accessing data that needs to persist across renders, such as the current state of an input field, or a reference to a DOM element.
Syntax
The syntax for useRef is very simple. Here is an example:
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
// do something with inputRef.current
return (
<input type="text" ref={inputRef} />
);
}
In this example, we import the useRef hook from the react library, and create a reference to an input element using the useRef hook. We then pass the reference to the ref prop of the input element, which allows us to access the current value of the input element later.
Using useRef to access DOM elements
One of the most common use cases for useRef is to access and manipulate DOM elements directly. Here is an example:
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
}
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
In this example, we create a reference to an input element using the useRef hook, and define a function called focusInput that sets the focus to the input element when called. We then pass the reference to the ref prop of the input element, and create a button that calls the focusInput function when clicked.
Using useRef to store and persist data
Another common use case for useRef is to store and persist data across renders. Here is an example:
import { useRef } from 'react';
function MyComponent() {
const counterRef = useRef(0);
const incrementCounter = () => {
counterRef.current += 1;
}
return (
<div>
<p>Counter: {counterRef.current}</p>
<button onClick={incrementCounter}>Increment Counter</button>
</div>
);
}
In this example, we create a reference to a counter variable using the useRef hook, and set its initial value to 0. We then define a function called incrementCounter that increments the value of the counter variable when called. We then render the current value of the counter variable using counterRef.current, and create a button that calls the `incrementCounter
Happy Learning!! Happy Coding!!
Comments