SkillPies.com

forwardRef

React 18

      import React, { forwardRef, useRef, render } from "react";

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

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

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

  return (
    <div>
      <h1>Using forwardRef with React 18</h1>
      <Input 
        ref={inputRef} 
        placeholder="Type something..." 
      />
      <button onClick={focusInput}>
        Focus the Input
      </button>
    </div>
  );
};

render(<Parent />)

      body, button {
  font-size: 24px;
}

#root > div {
  padding: 16px;
}

The purpose of forwardRef is that it lets you directly pass refs to child components, making them easier to manage without adding unnecessary complexity.
forwardRef ensures the parent can pass a ref to the internal input element. If we did not use the forwardRef, the component would not know which DOM element you meant to reference and pass to the parent. With forwardRef, the ref is passed as the second argument to the functional component.
Therefore, we first wrap our custom component with forwarRef
And then expose the DOM input element to the parent component through the ref parameter.
Then, in the Parent component we create a ref using useRef ...
... and then pass the ref to our Input component.
With the ref in place, we can use it to focus the input element in the click event handler in the parent component!

forwardRef

React 19

      import React, { forwardRef, useRef, render } from "react";

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

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

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

  return (
    <div>
      <h1>Using forwardRef with React 19</h1>
      <Input 
        ref={inputRef} 
        placeholder="Type something..." 
      />
      <button onClick={focusInput}>
        Focus the Input
      </button>
    </div>
  );
};

render(<Parent />)

      body, button {
  font-size: 24px;
}

#root > div {
  padding: 16px;
}

forwardRef

Key Takeways

Use ref directly for DOM elements where possible.
Use forwardRef when building custom components
React 19 simplifies the API without forwardRef

Full Stack Development

forwardRef

forwardRef

React 18

forwardRef

React 19

forwardRef

Key Takeways