📘 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:

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

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

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

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 🔥