React forwardRef: How deep can you pass down forwardRef?

Question

I'm wondering how deep you can pass forwardRef down in a nested app, and how would someone pass it down?

Something like this:

<Parent>
  <Child>
    ....
  </Child>
</Parent>

    <Child>
      <GrandChild>
          ....      
      </GrandChild>
    </Child>

        <GrandChild>
          <GreatGrandChild>
            ....
          </GreatGrandChild>
        </GrandChild>

            <GreatGrandChild>
              ....
            </GreatGrandChild>

and then use it in GreatGrandChild component or passing down the ref of and element in Parent down to GreatGrandChild

Answer 1

You could pass a ref as deep as you want but that seems inefficient.

One alternative would be to use the context API to set a ref in the producer (component containing the ref element) and use it in the consumer (child that will utilize the ref)