forwardRef allows a parent component to send a ref to a child so the parent can directly access: a child DOM element or a child’s imperative methods.

forwardRef.js

// Child Component (Custom Input + Auto Focus)
// “forwardRef lets a parent component directly access a child’s DOM element or method through a ref,
// which is not possible with normal props.”

import React, { forwardRef } from "react";

const TextInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

export default TextInput;

// Parent Uses the Child’s Input Ref
import React, { useRef, useEffect } from "react";
import TextInput from "./TextInput";

const App = () => {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus(); // Parent focusing child’s input
  }, []);

  return (
    <div>
      <TextInput ref={inputRef} placeholder="Auto focused input" />
    </div>
  );
};

export default App;



// Real Use Case Example: Open Child Modal from Parent
// Child => modal
const Modal = forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);

  useImperativeHandle(ref, () => ({
    show() {
      setOpen(true);
    },
    hide() {
      setOpen(false);
    }
  }));

  return open ? <div className="modal">I am modal</div> : null;
});

// Parent
const App = () => {
  const modalRef = useRef();

  return (
    <>
      <button onClick={() => modalRef.current.show()}>
        Open Modal
      </button>
      // child modal pass ref={modalRef}
      <Modal ref={modalRef} />
    </>
  );
};