Removing a ref callback works differently on HostComponents vs ClassComponents

[rhagigi]

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

Bug

What is the current behavior?

If you remove the ref from a mounted HostComponent on an update, it calls the original ref with null. If you remove the ref from a mounted ClassComponent on an update, it does not call the original ref with null.

https://codesandbox.io/s/q8k7776pz9 Note that it doesn't call ref1 (passed to FooInner as ref) with null

https://codesandbox.io/s/849538y8m8 Note that it does call ref1 (passed to div as ref) with null

If you modify the ref from either a HostComponent or a ClassComponent (change from ref={this.ref1} to ref={this.ref2}), the original ref (ref1) is called with null and the new ref (ref2) is called with the instance.

(take the sandboxes above and change the second <Foo> to ref={this.ref2}

What is the expected behavior?

Honestly not sure but it should be consistent. The reason this is different is because for HostComponents, we decide to schedule a Ref effect on completeWork as long as current.ref !== workInProgress.ref. For ClassComponents, this decision is made on beginWork as long as workInProgress.ref && (!current || current.ref !== workInProgress.ref) -- which means if workInProgress.ref is null, the behavior is different (hence this issue).

We should probably pick one and make it consistent.

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

Unsure - it for sure is an issue in latest/Fiber, but I haven't dug deep enough to see what happened in <16.