# 📘 React Mastery Series — Day 23

## Ref Forwarding & Advanced useRef Patterns in React

By now, we know:

👉 `useRef` can access DOM  
👉 It can store mutable values  
👉 It doesn’t cause re-render

But today we go one level deeper.

We learn:

✔ Ref Forwarding  
✔ Advanced real-world useRef patterns

* * *

## 🤔 Problem: Refs Don’t Automatically Pass to Custom Components

Example:

```plaintext
function CustomInput() {
  return <input type="text" />;
}

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

  return <CustomInput ref={inputRef} />;
}
```

This won’t work.

Why?

Because refs only work directly on DOM elements —  
  
not normal functional components.

* * *

## ✅ Solution — Ref Forwarding

React provides:

👉 `React.forwardRef`

* * *

## 🛠 Example — Forwarding Ref Properly

```plaintext
import React, { useRef } from "react";

const CustomInput = React.forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}
```

Now it works 🎯

* * *

## 🧠 What is Ref Forwarding?

> Ref Forwarding allows a parent component to pass a ref through a child component to a DOM element.

Very useful in:

✔ Reusable UI libraries  
  
✔ Custom input components  
  
✔ Form components  
  
✔ Modal components

* * *

## 🔥 Advanced useRef Pattern 1 — Storing Timers

```plaintext
import { useRef } from "react";

function TimerExample() {
  const timerRef = useRef(null);

  const startTimer = () => {
    timerRef.current = setTimeout(() => {
      alert("Time's up!");
    }, 2000);
  };

  const stopTimer = () => {
    clearTimeout(timerRef.current);
  };

  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}
```

✔ Useful for cleanup  
  
✔ Prevent memory leaks

* * *

## 🔥 Advanced Pattern 2 — Prevent Multiple Clicks

```plaintext
function ButtonExample() {
  const clickedRef = useRef(false);

  const handleClick = () => {
    if (clickedRef.current) return;

    clickedRef.current = true;
    console.log("Clicked once!");
  };

  return <button onClick={handleClick}>Click Me</button>;
}
```

✔ Stores state without re-render  
  
✔ Useful in API calls

* * *

## 🧠 When Should You Use Ref Forwarding?

✔ Building reusable component libraries  
  
✔ Creating custom form inputs  
  
✔ Integrating third-party libraries  
  
✔ Managing focus manually

* * *

## ❌ When NOT to Use It

❌ For normal prop passing  
  
❌ As state replacement  
  
❌ Without real need

* * *

## 🧠 Interview One-Liner

> Ref forwarding allows a parent component to pass a ref to a child component’s DOM element using React.forwardRef.

* * *

## 🔗 How It Connects

✔ useRef (Day 17)  
  
✔ Event Handling (Day 22)  
  
✔ Controlled Forms (Day 18)  
  
✔ Reusable Components

This is intermediate-to-advanced React knowledge.

* * *

## ✅ Key Takeaways

✔ Refs don’t automatically pass to custom components  
  
✔ React.forwardRef solves it  
  
✔ useRef can store timers & flags  
  
✔ Useful in real-world component design

* * *

## 🔜 Coming Next

**Day 24 — Error Boundaries in React (Handle UI Crashes Gracefully)**

Now we enter production-level thinking 🔥