The differences between useState and useRef
Use useState when
-You need to manage local state within a component.
-You want the component to re-render when the state changes.
-You need to store primitive values like strings, numbers, or booleans.
Use useRef when
-You need to store a value that should persist across renders but not trigger a re-render when it changes.
-You need to access DOM elements directly.
-You need to store mutable objects.
Example
Let's consider a real-life example of a form with validation. In this scenario, we will use both useState and useRef to demonstrate their respective use-cases.
CODE:
import React, { useState, useRef } from "react";
export function App(props) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isValid, setIsValid] = useState(false);
const emailInputRef = useRef();
const validateForm = () => {
setIsValid(email.includes("@") && password.length >= 8);
};
const handleSubmit = (e) => {
e.preventDefault();
if (!isValid) {
emailInputRef.current.focus();
} else {
// Submit Action
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
ref={emailInputRef}
onChange={(e) => setEmail(e.target.value)}
onBlur={validateForm}
placeholder="Email"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
onBlur={validateForm}
placeholder="Password"
/>
<button type="submit">Sign Up</button>
{!isValid && <p style={{"color": "red"}}>Please enter a valid email and password.</p>}
</form>
);
}
In this example, we use useState to manage the email, password, and validation state. We also use useRef to create a reference to the email input element, which allows us to focus on it if the form is not valid upon submission
Top comments (0)