Refs don't get attached to a component inside Suspense

[vaclav-zeman]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
When you want to attach ref to a component that is lazy loaded and is rendered inside <Suspense>, the ref is just always null.

I've tried both React.createRef and normal ref={console.log} callback but it's just never called.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React.:
https://codesandbox.io/s/1yom049zkj

What is the expected behavior?
Attaching ref successfully

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.7.0

[gaearon]

Here's a fixed version: https://codesandbox.io/s/10kr7835vj

There's a few things going on here:

• fallback should be an element, not a function. (This wasn't important, just thought I should note.)
• You gave ref to a function component. That wouldn't work without forwardRef in it. (I guess there was no warning because of laziness. I'll look into making it warn in that case too.)
• console.log(this.testRef.current) in parent's render is too early because refs are attached after rendering. But Parent's componentDidMount would also be too early as well because Hello is lazy, and thus isn't resolved yet by the time Parent mounts. That's the whole point of lazy loading — Parent can mount before child is resolved.

I added forwardRef to Hello to show that ref gets attached in this case (your log with callback ref fires). I also changed the object ref to log the container (this.testRef) to show that current gets attached eventually — just not early enough for Parent to know. If you need to be notified about its attachment, that's indeed what callback refs are for.

[vaclav-zeman]

Ah, I see. I wasn't aware of forwardRef till now. Thanks a lot! :)

[igoriok1994]

Here's a fixed version: https://codesandbox.io/s/10kr7835vj

There's a few things going on here:

• fallback should be an element, not a function. (This wasn't important, just thought I should note.)
• You gave ref to a function component. That wouldn't work without forwardRef in it. (I guess there was no warning because of laziness. I'll look into making it warn in that case too.)
• console.log(this.testRef.current) in parent's render is too early because refs are attached after rendering. But Parent's componentDidMount would also be too early as well because Hello is lazy, and thus isn't resolved yet by the time Parent mounts. That's the whole point of lazy loading — Parent can mount before child is resolved.

I added forwardRef to Hello to show that ref gets attached in this case (your log with callback ref fires). I also changed the object ref to log the container (this.testRef) to show that current gets attached eventually — just not early enough for Parent to know. If you need to be notified about its attachment, that's indeed what callback refs are for.

But what if I don't want forward ref to the element, what if I want to get component's instance and then to call a component's method?

Eg:

const Component = React.lazy(() => import(...))

//constructor
this.compRef = React.createRef();


//render

<Component ref={this.compRef }/>


//somewhere in code

onChangeHandler = () => {
            this.compRef.current.updatePages();
}

[gaearon]

It would work the same way.

[gaearon]

At least it should. If it doesn’t file a new bug with a reproducing case.