What is useState?
useState
is a React hook used for managing state in functional components. It allows you to add state to your components, making them dynamic and interactive.
Key Features of useState
- State Management:
useState
helps manage state within a component. - Re-renders on Change: The component re-renders when the state changes.
- Batched Updates: React batches multiple state updates for performance.
Example using useState
Here’s a simple counter that increments when a button is clicked.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;
In this example, useState
initializes the count at 0 and updates it each time the button is clicked, causing the component to re-render.
What is useRef?
useRef
is another React hook, primarily used for accessing and manipulating DOM elements directly. It persists values between renders without causing re-renders.
Key Features of useRef
- DOM Reference: Provides a way to reference and interact with DOM elements.
- No Re-renders on Change: Changing the ref value does not trigger a re-render.
- Persistent Values: Keeps the same object reference between renders.
Example using useRef
Here’s an example where clicking a button focuses an input field.
import React, { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
export default FocusInput;
In this example, useRef
creates a reference to the input element, allowing direct DOM manipulation to focus the input field when the button is clicked.
useState vs useRef: A Comparison 🔍
Let's compare useState
and useRef
based on several aspects.
Aspect | useState | useRef |
---|---|---|
Purpose | State management | DOM reference |
Return value | Returns [value, setValue]
|
{ current: initialValue } |
Initial value | Required | Optional |
Re-render on change | Yes | No |
Mutablility | Mutable | Immutable |
Update trigger | Function call | Direct mutation of current |
Usage in rendering | Yes | No |
Async updates | Batched | Immediate |
Hook type | State hook | Ref hook |
Common use case | Managing component state | Accessing/manipulating DOM elements |
When to Use useState
- Managing dynamic values that impact the UI.
- Triggering re-renders to reflect state changes.
When to Use useRef
- Accessing or modifying DOM elements directly.
- Storing mutable values that persist across renders without causing re-renders.
Conclusion
Understanding the differences between useState
and useRef
is crucial for effective state management and DOM manipulation in React. Use useState
when you need stateful logic that affects rendering. Use useRef
for accessing DOM elements and persisting values without causing re-renders.
Top comments (0)