What are DOM components in the context of refs in react Js?

In the legacy react documentation for ref forwarding, there's a note which says:

> Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.

In another SO post it is suggested that DOM components are those which return a single(non-nested) dom element. E.g.

function FancyButton(props) {
  return (
    <button className="FancyButton">
      //no further child elements
      //which means not even {props.children}
    </button>
  );
}

My doubt is that these plain-single-non-nested(leaf element?) elements can be represented as class components as well, so if react docs mean this as the DOM component, then why would it say You can forward refs to class component instances, too?

To me it feels like react docs meant to say

> ref forwarding is not limited to function components. You can forward refs to class component instances, too.

You are correct that the term "DOM component" can be ambiguous, and there is some overlap between the concept of a DOM component and a React tree leaf node.

A DOM component, in general, is any component that renders an actual HTML element on the page. Both function components that return a single non-nested element and class components that render one or more elements are included.

In the context of ref forwarding, the React documentation is specifically referring to components that render an actual HTML element, whether they are implemented as function components or class components. Ref forwarding allows you to pass a ref from a parent component to an underlying child component so that you can interact with its underlying DOM node directly.

So when the documentation says "Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too", it means that you can forward refs from parent components to child class components that render actual HTML elements.

In summary, while there may be some ambiguity in the term "DOM component", in this context it refers specifically to components that render actual HTML elements and can include both function and class components.

> Ref forwarding is not limited to DOM components. You can forward refs
> to class component instances, too.

So , basically here the focus should not be on the class component , it should be on the class component instances.

Basically, as stated by @Shivanshu in his answer , we can use refs in the HTML elements referred to as DOM Components directly or we can further forward it to the child components either it is a functional component or class component.

As per my understanding ,here the mention of class component instances is there because if we forward refs to class components , they are to be accessed using the instance of the class with this keyword.

class ClassComponent extends React.Component {
      render() {
        return (
          <input
            value={this.props.value}
            onChange={this.props.onChange}
            ref={this.props.innerRef}
          />
        );
      }
    }

    

   const Input = React.forwardRef(function (props, ref) {
           return <ClassComponent {...props} innerRef={ref} />;
   });

I am starting to think that actually from the context of Forwarding refs to dom components article, they use function components synonymously with DOM components.

Even furthermore, it sounds like they are thinking of leaf components as a subset of function components, although this is an ambiguous statement as they never define leaf components and you can create a leaf component based upon a class component as well. Any way in the ref forwarding article they mention:

> Although such encapsulation is desirable for application-level components like FeedStory or Comment, it can be inconvenient for highly reusable “leaf” components like FancyButton[certainly function component] or MyTextInput.

Also leaf components can have nested structures of pure dom elements, it's just they can't have further react components as child(ren)

Now the first line of the article itself is

> Consider a FancyButton component that renders the native button DOM element

Here FancyButton is a stateless¹ function component, .

I would take it as:

> Consider a FancyButton component[Dom/leaf component] that renders the native button DOM-element.

Then as the article progresses, they show how to forward ref on a function component as:

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

Come to think of it! The title of the article is Forwarding refs to DOM components and then in the article they talk about function components and give an example of how to forward a ref to a function component. Most likely they are taking DOM component as a simple function component(leaf like?). So I would interpret the note as following:

> ref forwarding is not limited to DOM components [simple leaf like function components]. You can forward refs to [complex non leaf like nested] class component instances, too.

^{1: Up until that point in the legacy docs, they didn't have hooks, so they were considering functional components stateless.}