Introduction to React useRef hook
The user interface building JavaScript library React delivers multiple hooks while providing tools for controlling states as well as facilitating side effects. The React useRef hook represents one of the hook tools which developers frequently fail to understand and minimize their usage of.
Read my Introduction to React.js first if you need better understanding of ReactJs.
The hook useRef enables users to establish mutable references between both DOM elements and retainable values while skipping unnecessary re-render operations. Updating useRef data does not lead to component re-rendering because it differs from useState which makes it appropriate when you need to maintain mutable values independently from component updates.
In this blog post, we’ll explore:
- How
useRefworks - Common use cases
- Practical examples
- When to prefer useRef over useState
- Limitations of useRef
Your knowledge will be complete regarding the appropriate utilization of useRef in React applications following this primer.
How useRef Works
A ref object provided by the useRef hook enables direct modification and allows users to change the .current property value. A mutable ref object is returned by useRef when combined with an initial value which can be updated without triggering component re-rendering.
Key Characteristics of useRef
- The
.currentproperty exhibits complete modification freedom because it functions as a mutable attribute. - From one render to the next the ref object demonstrates stability.
- The modification of
.currentdoes not cause components to update because it does not result in re-rendering.
Basic Syntax
import { useRef } from 'react';
function MyComponent() {
const myRef = useRef(initialValue); // Initialize with a default value
// Accessing the current value
console.log(myRef.current);
return <div ref={myRef}>Hello World</div>;
}
The update of myRef.current avoids triggering a re-render as opposed to the state modifications in useState. The storage capabilities of useRef remain separate from the direct impact they would have on the User Interface.
Common Use Cases of useRef
useRef is versatility because it finds applications across different situations.
1. Accessing DOM Elements
Users typically interact with the DOM by directly controlling elements such as focusing inputs for user interaction and measuring their dimensions.
2. Storing Mutable Values Without Re-renders
The use of this state pattern maintains track of essential values that cause no re-render events (such as timers or intervals).
3. Keeping Track of Previous State
Comparing state or prop values requires the storage of their previously recorded values.
4. Managing Uncontrolled Components
Form input actions that take place beyond React state management (such as file input events) represent a case where optimal performance may be compromised.
The following section features real-world applications about these situations.
Example: Using useRef to Manage Focus
The standard application of the focus use case involves automatically bringing an input into focus when a component loads or when a button gets pressed.
Code Example:
import { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus(); // Directly focus the input
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>Focus Input</button>
</div>
);
}
Explanation
- When used with the ref attribute this
inputRefobtains reference to the<input>element. - The function
inputRef.current.focus()receives input when the button gets clicked.
This cleaning method surpasses document.getElementById() usage while maintaining compliance with React’s declarative programming principle.
Example: Storing Mutable Values Without Re-renders
You require a way to monitor component re-renderings but this measurement should not produce further renders.
Code Example
import { useState, useRef, useEffect } from 'react';
function RenderCounter() {
const [count, setCount] = useState(0);
const renderCount = useRef(0); // Does not cause re-render on update
useEffect(() => {
renderCount.current += 1; // Increment on every render
});
return (
<div>
<p>State Count: {count}</p>
<p>Component Rendered {renderCount.current} times</p>
<button onClick={() => setCount(count + 1)}>Increment State</button>
</div>
);
}
Explanation:
- The
renderCount.currentvalue grows during every re-render while remaining unaffected by increments of ref variables. - The button click initiates an update to count which activates a new rendering process to change
renderCount.
The monitoring system provides developers with important information while keeping the program performance stable.
Example: Keeping Track of Previous State
The useRef API assists in storing the previous state value so you can compare it with the current state.
Code Example
import { useState, useRef, useEffect } from 'react';
function PreviousStateTracker() {
const [name, setName] = useState('');
const prevName = useRef('');
useEffect(() => {
prevName.current = name; // Update ref after render
}, [name]);
return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Current Name: {name}</p>
<p>Previous Name: {prevName.current}</p>
</div>
);
}
Explanation:
- The variable
prevNamemaintains an updated version of name after any modification. - The
useEffectfunction executes after the render process whileprevName.currentremains one value behind the current name update.
The pattern proves beneficial during animations, transition sequences and when building undo features.
When to Use useRef Instead of useState
Eligible hooks perform different storage tasks which distinguish them from one another.
| Scenario | useState | useRef |
| Need to trigger re-render | Yes | No |
| Store DOM references | No | Yes |
| Track mutable values silently | No | Yes |
| Keep previous state | No | Yes |
When to Prefer useRef
- DOM Manipulation refers to both element accessibility and their direct modification.
- Mutable Variables serve as storage for values which should not activate re-renders but include timers and intervals.
- Comparing the current state with the previously recorded state and props is part of the value tracking system.
When to Prefer useState
- Controlled components indicate when screen changes should appear in output outcomes.
- Controlled Components: Managing form inputs via React state.
Limitations of useRef
The use of useRef in applications faces several restrictions since its implementation offers limited functionality.
- The absence of updates as a result of changes makes this inappropriate for UI-dependent state control.
UseRefdoes not function likeuseStatebecause altering the.currentproperty fails to trigger component re-rendering.- Memoization functions and state updating effects are more beneficial than
useReffor derived values based on properties or state.
When Not to Use useRef
- Derived state should be built from properties when needed.
- The time when data needs to match UI display depends on specific situations.
Conclusion
Through useRef hooks in React developers can manage mutable values which do not trigger re-renders. It’s particularly useful for:
- DOM manipulation (e.g., focusing inputs).
- You should store mutable values such as render counters and intervals.
- The system monitors old data by comparing recently-modified and original information.
UseRef provides value preservation but should not be used instead of useState to achieve reactivity in your application. Knowledge about the appropriate hook selection will lead developers to create more efficient and manageable React code.
Using useRef gives you the potential to enhance application performance and deal with effects that you encounter while building your applications. Test it by applying this hook during your upcoming project work.
Final Thoughts
Have you implemented useRef in a unique manner? Provide your interesting experiences with useRef through comments. This guide should provide value to developers so you can share it with other professionals.
My other blog demonstrates how to retrieve Google Search Console data programatically.
Happy Coding!
