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

Potential duplicate: https://stackoverflow.com/questions/50621471/access-a-nested-grand-child-component-in-a-parent-component — Kalinda Pride, May 26 '21 at 20:23

score 1 · Answer 1 · answered Feb 12 '20 at 18:26

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)

answered Feb 12 '20 at 18:26

varoons

3,807
1
16
20

1

How would you go about doing it with context? Sorry I can't wrap my head around this. – Misuti Feb 12 '20 at 19:19

React forwardRef: How deep can you pass down forwardRef?

1 Answers1