SamwithCode

what forward ref and no more forward ref in react js 2025

What is forwardRef in React JS (2025)

forwardRef is a React function that lets you pass a ref from a parent component to a child functional component — something that's not possible by default.

📌 Why Use forwardRef?

  • Access a DOM node inside a child functional component.
  • Useful for custom input components, animations, or third-party integration.

🚀 Example: Custom Input with forwardRef


import React, { forwardRef, useRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return (
    
  );
});

function ParentComponent() {
  const inputRef = useRef();

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

  return (
    

      
      
    

  );
}

❌ What does "No more forwardRef" mean?

In **React Server Components** or some **modern patterns in React 2025**, people say "no more forwardRef" because:

  • You can use **hooks-based composition** or **context APIs** to manage focus or access DOM more cleanly.
  • New component libraries often abstract these patterns already — no need to forward refs manually.
  • In many use cases, `useRef` with callbacks or `useImperativeHandle` can reduce the need for `forwardRef`.

But in standard DOM access scenarios (like input focus or animations), forwardRef is still 100% valid in 2025.