React Forms Using Refs

The useRef Hook

The useRef hook is the primary method for creating refs in modern React applications. It returns a mutable ref object whose .current property is initialized to the passed argument.

Basic Usage Pattern

import { useRef } from 'react';

function SearchForm() {
 const inputRef = useRef(null);
 
 const handleSearch = () => {
 // Access the input element directly
 inputRef.current.focus();
 inputRef.current.select();
 };
 
 return (
 <form>
 <input 
 ref={inputRef}
 type="text"
 placeholder="Search..."
 />
 <button type="button" onClick={handleSearch}>
 Search
 </button>
 </form>
 );
}

Multiple Refs in a Form

For forms with many fields, consider storing refs in an object:

const formRefs = {
 firstName: useRef(null),
 lastName: useRef(null),
 email: useRef(null),
 password: useRef(null)
};

const validateAndFocus = () => {
 // Check each field and focus the first invalid one
 for (const [name, ref] of Object.entries(formRefs)) {
 if (!ref.current.value.trim()) {
 ref.current.focus();
 return false;
 }
 }
 return true;
};

React 19: Simplified Ref Handling

React 19 introduces significant improvements that make working with refs in forms much cleaner and more intuitive.

No More forwardRef

Before React 19, passing a ref to a child component required wrapping it in forwardRef:

// Before React 19 - Required forwardRef
const InputField = forwardRef(({ label, ...props }, ref) => (
 <div>
 <label>{label}</label>
 <input ref={ref} {...props} />
 </div>
));

// Parent usage
function Form() {
 const inputRef = useRef(null);
 return <InputField ref={inputRef} label="Name" />;
}

React 19 simplifies this by allowing refs to be passed as regular props:

// React 19 - Ref as a regular prop
const InputField = ({ label, ref, ...props }) => (
 <div>
 <label>{label}</label>
 <input ref={ref} {...props} />
 </div>
);

// Parent usage - exactly the same API, cleaner component
function Form() {
 const inputRef = useRef(null);
 return <InputField ref={inputRef} label="Name" />;
}

Ref Cleanup Functions

React 19 introduces support for cleanup functions in ref callbacks, enabling automatic cleanup when components unmount:

// React 19 - Ref with cleanup function
const setInputRef = (node) => {
 if (node) {
 console.log('Input attached:', node.id);
 node.focus();
 }
 
 // Cleanup function - automatically called on unmount
 return () => {
 console.log('Input detached, cleaning up');
 // Any cleanup logic here
 };
};

// Usage
<input ref={setInputRef} id="email" />

This eliminates the need for manual cleanup in useEffect and prevents memory leaks in complex form scenarios.

TypeScript Note: React 19 requires explicit returns from ref callbacks. Implicit returns like (node) => node && node.focus() are no longer allowed.

Callback Refs for Dynamic Forms

Callback refs provide flexibility for scenarios where refs need to be created dynamically or attached conditionally.

When to Use Callback Refs

• Dynamic form fields that are added or removed
• Forms with conditional rendering of inputs
• Integration with animation libraries
• Custom ref handling logic

Implementation Patterns

function DynamicForm() {
 const [fields, setFields] = useState([{ id: 1 }, { id: 2 }]);
 const fieldRefs = useRef({});
 
 const setFieldRef = (id) => (node) => {
 if (node) {
 fieldRefs.current[id] = node;
 } else {
 delete fieldRefs.current[id];
 }
 };
 
 const addField = () => {
 setFields([...fields, { id: Date.now() }]);
 };
 
 const validateAll = () => {
 Object.values(fieldRefs.current).forEach(ref => {
 if (!ref.value) {
 ref.focus();
 throw new Error('All fields required');
 }
 });
 };
 
 return (
 <div>
 {fields.map(field => (
 <input 
 key={field.id}
 ref={setFieldRef(field.id)}
 placeholder={`Field ${field.id}`}
 />
 ))}
 <button onClick={addField}>Add Field</button>
 <button onClick={validateAll}>Validate All</button>
 </div>
 );
}

Performance Optimization with Refs

Refs can significantly improve form performance by enabling direct DOM access that bypasses React's rendering cycle. When building high-performance web applications, strategic ref usage prevents unnecessary re-renders and keeps forms responsive.

Avoiding Unnecessary Re-Renders

function LargeForm() {
 const nameRef = useRef(null);
 const [saveStatus, setSaveStatus] = useState('saved');
 
 // Read value without triggering re-render
 const handleAutoSave = useCallback(() => {
 const value = nameRef.current.value; // Direct read
 if (value !== lastSaved.current) {
 saveToServer(value); // Async operation
 }
 }, []);
 
 return (
 <form>
 <input ref={nameRef} onChange={handleAutoSave} />
 <span>Status: {saveStatus}</span>
 </form>
 );
}

Real-World Performance Patterns

• Auto-save drafts: Read input values periodically without state updates
• Form measurements: Get dimensions or positions for animations
• Clipboard operations: Direct access to clipboard API
• Media controls: Control audio/video elements smoothly

Common Form Patterns with Refs

Focus Management

function ValidatedForm() {
 const refs = {
 email: useRef(null),
 password: useRef(null),
 confirm: useRef(null)
 };
 
 const handleSubmit = (e) => {
 e.preventDefault();
 const errors = validate(formData);
 
 if (errors.length > 0) {
 // Focus the first error field
 const firstError = errors[0];
 refs[firstError.field].current?.focus();
 return;
 }
 
 submitForm();
 };
 
 return (
 <form onSubmit={handleSubmit}>
 <input ref={refs.email} name="email" />
 <input ref={refs.password} type="password" />
 <input ref={refs.confirm} type="password" />
 <button type="submit">Submit</button>
 </form>
 );
}

Form Submission

function ExternalSubmitForm() {
 const formRef = useRef(null);
 
 const handleSave = () => {
 formRef.current.requestSubmit();
 };
 
 const handleSubmit = (e) => {
 e.preventDefault();
 const formData = new FormData(e.target);
 saveData(Object.fromEntries(formData));
 };
 
 return (
 <>
 <form ref={formRef} onSubmit={handleSubmit}>
 <input name="data" />
 <button type="submit">Submit</button>
 </form>
 <button onClick={handleSave}>Save</button>
 </>
 );
}

Validation and Error Handling

function ErrorAwareForm() {
 const errorRef = useRef(null);
 
 const scrollToFirstError = (errors) => {
 if (errors.length > 0 && errorRef.current) {
 errorRef.current.scrollIntoView({ 
 behavior: 'smooth',
 block: 'center'
 });
 errorRef.current.focus();
 }
 };
 
 return (
 <form>
 <div ref={errorRef} className="error-container" tabIndex={-1} />
 {/* Form fields */}
 </form>
 );
}

These patterns form the foundation of robust form experiences. When implementing form-heavy features, consider how AI-powered automation can streamline validation and submission workflows for complex business processes.

Sources

1. Saeloun Blog - React 19 Ref Updates
2. LogRocket Blog - Complete Guide to React Refs