What are forward refs ?

Forward refs in React are a feature that allows components to pass a ref they receive down to their child components. This is particularly useful when you need to access a DOM element or a component instance directly within a parent component, but the element you need to access is not a direct child due to being wrapped by another component, such as a higher-order component (HOC) or a functional component that does not expose its own ref.

The forwardRef function in React takes a render function as an argument and returns a React component that can receive a ref attribute from its parent. This ref can then be forwarded to a child component or DOM element within the render function, allowing the parent component to directly interact with the referenced child's DOM node or instance.

Here's a basic example of how forwardRef is used:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

In this example, FancyButton is a component that uses forwardRef to obtain the ref passed to it and then forwards it to the button DOM element it renders. This allows a parent component that renders FancyButton to obtain a reference to the underlying button DOM node directly.

It's important to note that while `f...