React · Hooks (Comprehensive)

useRef Hook

Master useRef for accessing DOM elements, persisting values across renders, and optimizing performance - the essential tool for direct DOM manipulation and value persistence.

Find videos you like?

Save to resource drawer for future reference!

What is useRef?

Direct access to DOM elements and persistent values

useRef is a Hook that returns a mutable ref object whose .current property persists for the full lifetime of the component. It's perfect for accessing DOM elements directly and storing values that don't trigger re-renders.

Basic Syntax

const myRef = useRef(initialValue);

initialValue:Starting value for the ref (can be null, object, etc.)

myRef.current:Property that holds the current value

DOM Access

• Direct DOM element manipulation
• Focus management
• Media playback control
• Canvas/drawing operations

Value Persistence

• Store values without re-renders
• Previous state tracking
• Interval/cleanup references
• Performance optimization

Key Advantage!

Unlike state, changing a ref's value doesn't trigger a re-render! Perfect for values you need to persist but don't need to display in the UI.

Why We Need useRef

Problems that refs solve better than state

The State Problem

State causes re-renders and can't directly access DOM elements. Sometimes you need to manipulate things without triggering updates!

🚨 useState Problems

Problem 1: Unnecessary Re-renders

// ❌ Every click triggers re-render

const [clickCount, setClickCount] = useState(0);

function handleClick() {}

setClickCount(prev => prev + 1); // Re-render!

console.log('Clicked', clickCount + 1); // Stale value!

}

State updates cause re-renders even when you just need to track something internally!

Problem 2: No Direct DOM Access

// ❌ Can't directly access DOM with state

const [inputValue, setInputValue] = useState('');

function focusInput() {}

// How to focus the input element?

// State doesn't give you DOM reference!

}

State doesn't provide direct access to DOM elements for manipulation!

Problem 3: Lost Values on Re-render

// ❌ Values reset on every render

function TimerComponent() {}

let intervalId; // Lost on re-render!

useEffect(() => {}

intervalId = setInterval(...); // Can't clean up!

return () => clearInterval(intervalId);

});

}

Regular variables are reset on every render, making cleanup impossible!

✅ useRef Solutions

Solution 1: No Re-renders

// ✅ No re-renders on update

const clickCountRef = useRef(0);

function handleClick() {}

clickCountRef.current += 1; // No re-render!

console.log('Clicked', clickCountRef.current); // Current value!

}

Ref updates don't trigger re-renders, perfect for internal tracking!

Solution 2: Direct DOM Access

// ✅ Direct DOM element access

const inputRef = useRef(null);

function focusInput() {}

inputRef.current.focus(); // Direct DOM manipulation!

}

Refs provide direct access to DOM elements for manipulation!

Solution 3: Persistent Values

// ✅ Values persist across renders

const intervalIdRef = useRef(null);

useEffect(() => {}

intervalIdRef.current = setInterval(...);

return () => clearInterval(intervalIdRef.current);

});

Ref values persist across renders, enabling proper cleanup!

Step-by-Step Guide

Learn useRef progressively

Step 1: Create a Ref

Initialize a ref with useRef() and an initial value. Think of it as creating a special container that persists across renders.

//Create a ref with initial value

const myRef = useRef(0); // Starts with 0

//Create a ref for DOM element

const inputRef = useRef(null); // Starts with null

//Create a ref for object

const dataRef = useRef({}); // Empty object

Pro Tip

Use null for DOM elements, 0 for numbers, or objects for complex data.

Step 2: Access the Ref Value

Use the .current property to read and write the ref value. This is your gateway to the stored data.

//Reading the ref value

console.log(myRef.current); // Current value

//Writing to the ref value

myRef.current = 42; // Update value

//For DOM elements

console.log(inputRef.current); // DOM element or null

Key Point

The ref object is just a container. Always use .current to access the actual value!

Step 3: Use Ref with DOM Elements

Attach the ref to JSX elements using the ref attribute. This gives you direct access to DOM elements!

function MyComponent() {}

const inputRef = useRef(null);

const focusInput = () => {}

inputRef.current?.focus(); // Safe access

});

return (

<button onClick={}focusInput}>Focus Input</button>

);

};

Safety First

Use optional chaining ?. when accessing DOM refs. They're null before mount and after unmount!

Step 4: Update Ref Values

Modify ref values without triggering re-renders. This is perfect for performance optimization and internal tracking!

function Counter() {}

const countRef = useRef(0);

const [renderCount, setRenderCount] = useState(0);

const incrementRef = () => {}

countRef.current += 1; // No re-render!

});

const forceRender = () => {}

setRenderCount(prev => prev + 1);

});

Performance Boost

Ref updates are synchronous and don't trigger re-renders. Perfect for tracking values internally without UI updates!

Step 5: Cleanup with Refs

Use refs to store values needed for cleanup. This prevents memory leaks and ensures proper resource management!

function Timer() {}

const intervalRef = useRef(null);

useEffect(() => {}

intervalRef.current = setInterval(() => {}

console.log('Tick');

}, 1000);

return () => {}

if (intervalRef.current) {}

clearInterval(intervalRef.current);

})

});

};

Memory Management

Refs are essential for storing timers, event listeners, and other resources that need cleanup. Prevent memory leaks!

Real-World Examples

Practical useRef patterns

Focus Management

Auto-focus and form navigation with refs

Frontend

function FocusForm() {
  const nameRef = React.useRef(null);
  const emailRef = React.useRef(null);
  const messageRef = React.useRef(null);

  const handleNameEnter = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      emailRef.current?.focus();
    }
  };

  const handleEmailEnter = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      messageRef.current?.focus();
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted!');
    nameRef.current?.focus();
  };

  return (
    <div className="focus-form">
      <h2>Contact Form</h2>
      <p>Press Enter to move to next field</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Name:</label>
          <input
            ref={nameRef}
            type="text"
            placeholder="Enter your name"
            onKeyDown={handleNameEnter}
            autoFocus
          />
        </div>

        <div className="form-group">
          <label>Email:</label>
          <input
            ref={emailRef}
            type="email"
            placeholder="Enter your email"
            onKeyDown={handleEmailEnter}
          />
        </div>

        <div className="form-group">
          <label>Message:</label>
          <textarea
            ref={messageRef}
            placeholder="Enter your message"
            rows={4}
          />
        </div>

        <div className="button-group">
          <button type="button" onClick={() => nameRef.current?.focus()}>
            Reset Focus
          </button>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FocusForm />);

Live Preview

Loading preview...

Performance Optimization

Track renders without causing re-renders

Frontend

function RenderTracker() {
  const renderCountRef = React.useRef(0);
  const lastRenderRef = React.useRef(Date.now());
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('');

  // Track renders without causing re-renders
  renderCountRef.current += 1;
  lastRenderRef.current = Date.now();

  const expensiveCalculation = React.useCallback(() => {
    console.log('Expensive calculation running...');
    return Array.from({ length: 1000000 }, (_, i) => i * 2).reduce((a, b) => a + b, 0);
  }, []);

  const handleExpensiveOperation = React.useCallback(() => {
    const result = expensiveCalculation();
    alert('Calculation result: ' + result);
  }, [expensiveCalculation]);

  return (
    <div className="tracker">
      <h2>Render Performance Tracker</h2>
      
      <div className="stats">
        <div className="stat">
          <span className="label">Render Count:</span>
          <span className="value">{renderCountRef.current}</span>
        </div>
        <div className="stat">
          <span className="label">Last Render:</span>
          <span className="value">{new Date(lastRenderRef.current).toLocaleTimeString()}</span>
        </div>
      </div>

      <div className="controls">
        <div className="control-group">
          <label>State Count: {count}</label>
          <button onClick={() => setCount(c => c + 1)}>
            Increment State (Triggers Re-render)
          </button>
        </div>

        <div className="control-group">
          <label>Input Text:</label>
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Type to trigger re-renders"
          />
        </div>

        <div className="control-group">
          <button onClick={handleExpensiveOperation}>
            Run Expensive Calculation
          </button>
        </div>
      </div>

      <div className="info">
        <p>💡 Render count is tracked with useRef - it updates without causing additional re-renders!</p>
        <p>Try typing in the input and watch how render count increases.</p>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RenderTracker />);

Live Preview

Loading preview...

Common Mistakes & Solutions

Avoid these useRef pitfalls

🚨 Mistake 1: Using Ref for Render-Dependent Values

// ❌ Using ref for values that should update UI

function Counter() {}

const countRef = useRef(0);

return (

<div>

<button onClick={() => countRef.current++}>

Count: {countRef.current} // Won't update!

</button>

</div>

);

}

✅ Solution:

Use state for values that need to trigger re-renders and update the UI. Use refs only for internal tracking or DOM access.

🚨 Mistake 2: Not Checking for Null DOM Refs

// ❌ Accessing DOM ref without null check

function MyComponent() {}

const inputRef = useRef(null);

useEffect(() => {}

inputRef.current.focus(); // Error if null!

});

return <input ref={inputRef} />;

}

✅ Solution:

Always check if DOM refs exist before accessing them. Use optional chaining or conditional checks.

🚨 Mistake 3: Creating Refs in Render Function

// ❌ Creating ref inside render logic

function BadComponent() {}

const items = [1, 2, 3];

return (

<div>

{items.map(item => {}

const itemRef = useRef(null); // New ref each render!

return <div ref={itemRef}>{item}</div>;

})

</div>

);

}

✅ Solution:

Create refs at the component level, not inside loops or conditional rendering. For multiple elements, use an array or object to store refs.

🚨 Mistake 4: Forgetting Cleanup

// ❌ Not cleaning up resources stored in refs

function TimerComponent() {}

const intervalRef = useRef(null);

useEffect(() => {}

intervalRef.current = setInterval(...);

// No cleanup function!

});

return <div>Timer</div>;

}

✅ Solution:

Always return a cleanup function from useEffect to clear intervals, event listeners, or other resources stored in refs.

Key Takeaways

Remember these important points

No Re-renders

Ref updates don't trigger component re-renders, perfect for performance optimization.

DOM Access

Direct access to DOM elements enables focus management, scrolling, and media control.

Value Persistence

Ref values persist across renders without being reset, essential for cleanup operations.

Performance Tool

Track renders, store previous values, and optimize expensive operations without UI updates.

Golden Rule!

Use refs for "escape hatches" - when you need to step outside React's declarative model. For everything else, prefer state and props!

Previous Topic

useContext Hook

Use Context API with useContext Hook, avoid prop drilling, and understand context performance.

Next Topic

useCallback Hook

Optimize performance with useCallback, prevent unnecessary re-renders, and memoization patterns.

Ask a Question

Have a question about useRef Hook? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useRef Hook

Master useRef for accessing DOM elements, persisting values across renders, and optimizing performance - the essential tool for direct DOM manipulation and value persistence.

Find videos you like?

Save to resource drawer for future reference!

What is useRef?

Direct access to DOM elements and persistent values

Basic Syntax

const myRef = useRef(initialValue);

initialValue:Starting value for the ref (can be null, object, etc.)

myRef.current:Property that holds the current value

DOM Access

• Direct DOM element manipulation
• Focus management
• Media playback control
• Canvas/drawing operations

Value Persistence

• Store values without re-renders
• Previous state tracking
• Interval/cleanup references
• Performance optimization

Key Advantage!

Unlike state, changing a ref's value doesn't trigger a re-render! Perfect for values you need to persist but don't need to display in the UI.

Why We Need useRef

Problems that refs solve better than state

The State Problem

State causes re-renders and can't directly access DOM elements. Sometimes you need to manipulate things without triggering updates!

🚨 useState Problems

Problem 1: Unnecessary Re-renders

// ❌ Every click triggers re-render

const [clickCount, setClickCount] = useState(0);

function handleClick() {}

setClickCount(prev => prev + 1); // Re-render!

console.log('Clicked', clickCount + 1); // Stale value!

}

State updates cause re-renders even when you just need to track something internally!

Problem 2: No Direct DOM Access

// ❌ Can't directly access DOM with state

const [inputValue, setInputValue] = useState('');

function focusInput() {}

// How to focus the input element?

// State doesn't give you DOM reference!

}

State doesn't provide direct access to DOM elements for manipulation!

Problem 3: Lost Values on Re-render

// ❌ Values reset on every render

function TimerComponent() {}

let intervalId; // Lost on re-render!

useEffect(() => {}

intervalId = setInterval(...); // Can't clean up!

return () => clearInterval(intervalId);

});

}

Regular variables are reset on every render, making cleanup impossible!

✅ useRef Solutions

Solution 1: No Re-renders

// ✅ No re-renders on update

const clickCountRef = useRef(0);

function handleClick() {}

clickCountRef.current += 1; // No re-render!

console.log('Clicked', clickCountRef.current); // Current value!

}

Ref updates don't trigger re-renders, perfect for internal tracking!

Solution 2: Direct DOM Access

// ✅ Direct DOM element access

const inputRef = useRef(null);

function focusInput() {}

inputRef.current.focus(); // Direct DOM manipulation!

}

Refs provide direct access to DOM elements for manipulation!

Solution 3: Persistent Values

// ✅ Values persist across renders

const intervalIdRef = useRef(null);

useEffect(() => {}

intervalIdRef.current = setInterval(...);

return () => clearInterval(intervalIdRef.current);

});

Ref values persist across renders, enabling proper cleanup!

Step-by-Step Guide

Learn useRef progressively

Step 1: Create a Ref

Initialize a ref with useRef() and an initial value. Think of it as creating a special container that persists across renders.

//Create a ref with initial value

const myRef = useRef(0); // Starts with 0

//Create a ref for DOM element

const inputRef = useRef(null); // Starts with null

//Create a ref for object

const dataRef = useRef({}); // Empty object

Pro Tip

Use null for DOM elements, 0 for numbers, or objects for complex data.

Step 2: Access the Ref Value

Use the .current property to read and write the ref value. This is your gateway to the stored data.

//Reading the ref value

console.log(myRef.current); // Current value

//Writing to the ref value

myRef.current = 42; // Update value

//For DOM elements

console.log(inputRef.current); // DOM element or null

Key Point

The ref object is just a container. Always use .current to access the actual value!

Step 3: Use Ref with DOM Elements

Attach the ref to JSX elements using the ref attribute. This gives you direct access to DOM elements!

function MyComponent() {}

const inputRef = useRef(null);

const focusInput = () => {}

inputRef.current?.focus(); // Safe access

});

return (

<button onClick={}focusInput}>Focus Input</button>

);

};

Safety First

Use optional chaining ?. when accessing DOM refs. They're null before mount and after unmount!

Step 4: Update Ref Values

Modify ref values without triggering re-renders. This is perfect for performance optimization and internal tracking!

function Counter() {}

const countRef = useRef(0);

const [renderCount, setRenderCount] = useState(0);

const incrementRef = () => {}

countRef.current += 1; // No re-render!

});

const forceRender = () => {}

setRenderCount(prev => prev + 1);

});

Performance Boost

Ref updates are synchronous and don't trigger re-renders. Perfect for tracking values internally without UI updates!

Step 5: Cleanup with Refs

Use refs to store values needed for cleanup. This prevents memory leaks and ensures proper resource management!

function Timer() {}

const intervalRef = useRef(null);

useEffect(() => {}

intervalRef.current = setInterval(() => {}

console.log('Tick');

}, 1000);

return () => {}

if (intervalRef.current) {}

clearInterval(intervalRef.current);

})

});

};

Memory Management

Refs are essential for storing timers, event listeners, and other resources that need cleanup. Prevent memory leaks!

Real-World Examples

Practical useRef patterns

Focus Management

Auto-focus and form navigation with refs

Frontend

function FocusForm() {
  const nameRef = React.useRef(null);
  const emailRef = React.useRef(null);
  const messageRef = React.useRef(null);

  const handleNameEnter = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      emailRef.current?.focus();
    }
  };

  const handleEmailEnter = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      messageRef.current?.focus();
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted!');
    nameRef.current?.focus();
  };

  return (
    <div className="focus-form">
      <h2>Contact Form</h2>
      <p>Press Enter to move to next field</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Name:</label>
          <input
            ref={nameRef}
            type="text"
            placeholder="Enter your name"
            onKeyDown={handleNameEnter}
            autoFocus
          />
        </div>

        <div className="form-group">
          <label>Email:</label>
          <input
            ref={emailRef}
            type="email"
            placeholder="Enter your email"
            onKeyDown={handleEmailEnter}
          />
        </div>

        <div className="form-group">
          <label>Message:</label>
          <textarea
            ref={messageRef}
            placeholder="Enter your message"
            rows={4}
          />
        </div>

        <div className="button-group">
          <button type="button" onClick={() => nameRef.current?.focus()}>
            Reset Focus
          </button>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FocusForm />);

Live Preview

Loading preview...

Performance Optimization

Track renders without causing re-renders

Frontend

function RenderTracker() {
  const renderCountRef = React.useRef(0);
  const lastRenderRef = React.useRef(Date.now());
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('');

  // Track renders without causing re-renders
  renderCountRef.current += 1;
  lastRenderRef.current = Date.now();

  const expensiveCalculation = React.useCallback(() => {
    console.log('Expensive calculation running...');
    return Array.from({ length: 1000000 }, (_, i) => i * 2).reduce((a, b) => a + b, 0);
  }, []);

  const handleExpensiveOperation = React.useCallback(() => {
    const result = expensiveCalculation();
    alert('Calculation result: ' + result);
  }, [expensiveCalculation]);

  return (
    <div className="tracker">
      <h2>Render Performance Tracker</h2>
      
      <div className="stats">
        <div className="stat">
          <span className="label">Render Count:</span>
          <span className="value">{renderCountRef.current}</span>
        </div>
        <div className="stat">
          <span className="label">Last Render:</span>
          <span className="value">{new Date(lastRenderRef.current).toLocaleTimeString()}</span>
        </div>
      </div>

      <div className="controls">
        <div className="control-group">
          <label>State Count: {count}</label>
          <button onClick={() => setCount(c => c + 1)}>
            Increment State (Triggers Re-render)
          </button>
        </div>

        <div className="control-group">
          <label>Input Text:</label>
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Type to trigger re-renders"
          />
        </div>

        <div className="control-group">
          <button onClick={handleExpensiveOperation}>
            Run Expensive Calculation
          </button>
        </div>
      </div>

      <div className="info">
        <p>💡 Render count is tracked with useRef - it updates without causing additional re-renders!</p>
        <p>Try typing in the input and watch how render count increases.</p>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RenderTracker />);

Live Preview

Loading preview...

Common Mistakes & Solutions

Avoid these useRef pitfalls

🚨 Mistake 1: Using Ref for Render-Dependent Values

// ❌ Using ref for values that should update UI

function Counter() {}

const countRef = useRef(0);

return (

<div>

<button onClick={() => countRef.current++}>

Count: {countRef.current} // Won't update!

</button>

</div>

);

}

✅ Solution:

Use state for values that need to trigger re-renders and update the UI. Use refs only for internal tracking or DOM access.

🚨 Mistake 2: Not Checking for Null DOM Refs

// ❌ Accessing DOM ref without null check

function MyComponent() {}

const inputRef = useRef(null);

useEffect(() => {}

inputRef.current.focus(); // Error if null!

});

return <input ref={inputRef} />;

}

✅ Solution:

Always check if DOM refs exist before accessing them. Use optional chaining or conditional checks.

🚨 Mistake 3: Creating Refs in Render Function

// ❌ Creating ref inside render logic

function BadComponent() {}

const items = [1, 2, 3];

return (

<div>

{items.map(item => {}

const itemRef = useRef(null); // New ref each render!

return <div ref={itemRef}>{item}</div>;

})

</div>

);

}

✅ Solution:

Create refs at the component level, not inside loops or conditional rendering. For multiple elements, use an array or object to store refs.

🚨 Mistake 4: Forgetting Cleanup

// ❌ Not cleaning up resources stored in refs

function TimerComponent() {}

const intervalRef = useRef(null);

useEffect(() => {}

intervalRef.current = setInterval(...);

// No cleanup function!

});

return <div>Timer</div>;

}

✅ Solution:

Always return a cleanup function from useEffect to clear intervals, event listeners, or other resources stored in refs.

Key Takeaways

Remember these important points

No Re-renders

Ref updates don't trigger component re-renders, perfect for performance optimization.

DOM Access

Direct access to DOM elements enables focus management, scrolling, and media control.

Value Persistence

Ref values persist across renders without being reset, essential for cleanup operations.

Performance Tool

Track renders, store previous values, and optimize expensive operations without UI updates.

Golden Rule!

Use refs for "escape hatches" - when you need to step outside React's declarative model. For everything else, prefer state and props!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useContext Hook

useCallback Hook

Building Your Learning Module...

useRef Hook

Basic Syntax

DOM Access

Value Persistence

Key Advantage!

The State Problem

🚨 useState Problems

Problem 1: Unnecessary Re-renders

Problem 2: No Direct DOM Access

Problem 3: Lost Values on Re-render

✅ useRef Solutions

Solution 1: No Re-renders

Solution 2: Direct DOM Access

Solution 3: Persistent Values

Step 1: Create a Ref

Step 2: Access the Ref Value

Step 3: Use Ref with DOM Elements

Step 4: Update Ref Values

Step 5: Cleanup with Refs

Focus Management

Performance Optimization

🚨 Mistake 1: Using Ref for Render-Dependent Values

✅ Solution:

🚨 Mistake 2: Not Checking for Null DOM Refs

✅ Solution:

🚨 Mistake 3: Creating Refs in Render Function

✅ Solution:

🚨 Mistake 4: Forgetting Cleanup

✅ Solution:

No Re-renders

DOM Access

Value Persistence

Performance Tool

Golden Rule!

useContext Hook

useCallback Hook

useRef Hook

Basic Syntax

DOM Access

Value Persistence

Key Advantage!

The State Problem

🚨 useState Problems

Problem 1: Unnecessary Re-renders

Problem 2: No Direct DOM Access

Problem 3: Lost Values on Re-render

✅ useRef Solutions

Solution 1: No Re-renders

Solution 2: Direct DOM Access

Solution 3: Persistent Values

Step 1: Create a Ref

Step 2: Access the Ref Value

Step 3: Use Ref with DOM Elements

Step 4: Update Ref Values

Step 5: Cleanup with Refs

Focus Management

Performance Optimization

🚨 Mistake 1: Using Ref for Render-Dependent Values

✅ Solution:

🚨 Mistake 2: Not Checking for Null DOM Refs

✅ Solution:

🚨 Mistake 3: Creating Refs in Render Function

✅ Solution:

🚨 Mistake 4: Forgetting Cleanup

✅ Solution:

No Re-renders

DOM Access

Value Persistence

Performance Tool

Golden Rule!