React JS 19 Tutorial in Hindi #40 Forward Ref in react 19 | forwardRef

  1. What is ForwardRef in React js
  2. Implement ForwardRef before react 19 version
  3. Implement ForwardRef in react 19
  4. Interview Question

forwardRef in React is a utility function that allows a parent component to "forward" a ref it created to a child component, specifically to a DOM node or another component instance inside that child component.

import { useRef } from "react"
import UserInput from "./UserInput";

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

const updateInput=()=>{
inputRef.current.value=1000;
inputRef.current.focus();
inputRef.current.style.color="red"
}
return (
<>
<h1>Forward Ref</h1>
<UserInput ref={inputRef} />
<button onClick={updateInput}>Update Input field</button>
</>
)
}
export default App

user

// import { forwardRef } from "react"

// const UserInput=(props,ref)=>{
// return(<div>
// <input type="text" ref={ref} />
// </div>)
// }

// export default forwardRef(UserInput);

const UserInput=(props)=>{
return(<div>
<input type="text" ref={props.ref} />
</div>)
}

export default UserInput