Forward Ref is Depreciated in React 19

Ref:

In React, refs are used to access DOM elements directly; you cannot do this like you would with document.CreateElement or document.getElement but directly ref. current and like this in React.

Forward Ref (Used Before React 19):

When a parent component needs to interact with a DOM element inside the child element in React Functional Component (e.g.,g focus, scroll measure), then forwardRef is used to fulfill this gap.

// Child Component
const CustomInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// Parent Component
function Parent() {
  const inputRef = useRef(null);
  useEffect(() => { inputRef.current.focus(); }, []);
  return <CustomInput ref={inputRef} />;
}

Mostly, it was used in libraries, and for the library, we have these rules (From Reddit):

• If a component is just a single element, it must forward ref

• If a component is composed of multiple elements, but there is one "main" element, there must be a forwarded ref to that element

• If the component is composed of multiple elements and there is no unambiguous "main" element, this component most likely should be split into multiple components

• If otherwise, such complex components can't be split; it forwards the collection of refs (we have only one such component - dayepicker with multiple fields)

For an application, refs are not forwarded unless it's necessary (usually, it's not necessary)

Then why is it depreciated?

1. Complexity and Boilerplate

It added unnecessery complexity for developer and codebase too. Entire component needs to wrap inside the forwardRef to work which is the extra step make hard to read code even for the developer.

What replaces forwardRef it in React 19?

In React 19, refs are passed as regular props to functional components, and you don’t need to worry about the wrap and writing forwardRef anywhere, everywhere. This means no longer a need to use forwardRef to forward refs to the child components. and you can directly access the DOM of the child element from the parent element.

Example of React 19:

function MyComponent({ ref, children }) {
  return <div ref={ref}>{children}</div>;
}

function ParentComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return <MyComponent ref={myRef}>Hello, React 19!</MyComponent>;
}

What should we use now?

If you plan to start a new project, you should use React 19 because it is the latest version and is simpler and more intuitive than before. If you are maintaining an exiting project, continue using forwardRef for now because before React 19, it is still supported but deprecated in new versions.

Thank You!