✅ `useRef` vs `useImperativeHandle` in React

When working with React functional components, two hooks often confuse developers: useRef and useImperativeHandle.
Both are related to refs, but they solve very different problems.

Understanding when to use which will help you write cleaner, safer, and more maintainable React code—and avoid unnecessary anti-patterns.

🚀 What Is `useRef`?

useRef is a React hook that returns a mutable object with a single property:

{ current: ... }

This object:

Persists across renders
Can be updated without causing a re-render
Is commonly used to reference DOM elements or store mutable values

Key idea

useRef is for holding values that React should ignore during rendering.

🔑 Common Uses of `useRef`

Accessing DOM elements (focus, scroll, measure)
Storing mutable values (timers, counters, previous values)
Avoiding unnecessary re-renders

🧩 Example 1: Accessing a DOM Element

import React, { useRef } from "react";

function FocusInput() {
  const inputRef = useRef(null);

  return (
    <div>
      <input ref={inputRef} placeholder="Type here..." />
      <button onClick={() => inputRef.current?.focus()}>
        Focus the input
      </button>
    </div>
  );
}

What’s happening?

inputRef.current points to the <input> DOM element
Calling .focus() does not trigger a re-render

🧩 Example 2: Storing a Mutable Counter (No Re-renders)

function ClickCounter() {
  const clicks = useRef(0);

  return (
    <button
      onClick={() => {
        clicks.current += 1;
        console.log(clicks.current);
      }}
    >
      Click me (check console)
    </button>
  );
}

Why this works

clicks.current updates without re-rendering
Perfect for values React doesn’t need to display

🚀 What Is `useImperativeHandle`?

useImperativeHandle is a hook that works only with forwardRef.

It lets a child component control exactly what the parent can access through a ref.

Instead of exposing:

the full DOM node
internal implementation details

you expose a clean, intentional API.

Key idea

useImperativeHandle is for controlling what the parent can do, not how the child works.

🔑 Why Use `useImperativeHandle`?

Encapsulation – hide internal details
Control – expose only what’s necessary
Cleaner APIs – especially for reusable components

Common use cases:

Custom input components
Modals (open(), close())
Media players (play(), pause())

🧩 Example: Exposing Methods from Child to Parent

Child Component

import React, {
  useRef,
  forwardRef,
  useImperativeHandle,
} from "react";

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current?.focus();
    },
    clear() {
      if (inputRef.current) {
        inputRef.current.value = "";
      }
    },
  }));

  return <input ref={inputRef} {...props} />;
});

export default CustomInput;

Parent Component

function Parent() {
  const childRef = useRef(null);

  return (
    <div>
      <CustomInput ref={childRef} placeholder="Custom input" />
      <button onClick={() => childRef.current?.focus()}>
        Focus child input
      </button>
      <button onClick={() => childRef.current?.clear()}>
        Clear child input
      </button>
    </div>
  );
}

Why this is better

Parent cannot touch the DOM directly
Child exposes only focus() and clear()
Safer and more maintainable

📚 `useRef` vs `useImperativeHandle`

Feature	`useRef`	`useImperativeHandle`
Purpose	Store mutable values or DOM references	Expose controlled methods to parent
Used in	Any component	Child component (with `forwardRef`)
Controls re-render	❌ No	❌ No
Access level	Full access to `current`	Only what you expose
Typical use	DOM access, timers, counters	Custom component APIs

✅ Best Practices

Prefer declarative props over imperative APIs
Use useRef for:
- DOM access
- Timers
- Mutable values
Use useImperativeHandle:
- Only when a parent must trigger child behavior
Always wrap useImperativeHandle with forwardRef
Keep imperative APIs small and intentional

🧾 Final Thoughts

Both hooks are powerful—but they serve very different purposes.

useRef → store or access values without triggering renders
useImperativeHandle → expose a controlled imperative API

If you remember one thing, remember this:

useRef is about storage.
useImperativeHandle is about control.

Mastering the difference will help you build cleaner, safer, and more professional React components.

React useRef vs useImperativeHandle: Key Differences with Examples