React Mastery Guide

Unlock the full potential of React with our comprehensive guide. From basics to advanced techniques, this course covers everything you need to build dynamic, high-performance web applications. Perfect for developers at any level, start mastering React today!

forwardRef
﻿
useRef is generally used to store DOM element that is not meant for rendering.
We know how to get a ref within a single component, but what if we want to pass a ref from a child component to a parent component?
In such cases, the forwardRef API comes into play.
﻿
Previously, to get a DOM element, we useRef like this:
function App() {
  const inputRef = useRef<HTMLInputElement>(null);
﻿
  useEffect(() => {
    inputRef.current?.focus();
  });
﻿
  return (
    <>
      <h1>React Hooks</h1>
      <div className="card">
        <input ref={inputRef}></input>
        <p>
          Edit <code>src/App.tsx</code> and save to test Hooks
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}
﻿
export default App;

Create a ref object with useRef, then set the input element to the ref.
﻿
If we want to pass a ref from a child component to a parent component, we use forwardRef to forward the ref inside the component.
function App() {
  const inputRef = useRef<HTMLInputElement>(null);
  
  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
﻿
  return (
    <>
      <h1>React Hooks</h1>
      <div className="card">
        <InputComponent ref={inputRef}></InputComponent>
        <div className="button-container">
          <button onClick={focusInput}>Focus the input</button>
        </div>
        <p>
          Edit <code>src/App.tsx</code> and save to test Hooks
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}
﻿
export default App;
﻿
const Input: React.ForwardRefRenderFunction<HTMLInputElement> = (
  props,
  ref
) => {
  return (
    <div>
      <input ref={ref} {...props}></input>
    </div>
  );
};
﻿
const InputComponent = React.forwardRef(Input);
﻿
Try it out!
﻿
﻿
forwardRef is very useful in the following scenarios:
When direct access to a child component's DOM element or component instance is needed from a parent component.
When building reusable libraries or higher-order components (HOCs) where ref forwarding to wrapped components is necessary.
﻿
By forwarding refs, forwardRef makes your components more flexible and controllable, especially in scenarios where direct manipulation of the DOM or child components is required.
﻿
﻿
﻿
﻿
﻿
﻿
﻿