Callback ref is passed null and then the component again

[ide]

I have a super simple React (Native) component with a static root with a callback ref. When the component is mounted, the callback ref is invoked with the root component. Then when I call setState the callback ref receives null and then the root component again.

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);
    console.log('in the constructor');
  }

  render() {
    return (
      <View
        key="root"
        ref={component => { console.log('got ref', component); }}
        style={this.props.style}
      />
    );
  }

  componentDidMount() {
    console.log('in componentDidMount');
    this.setState({});
  }
}

The console logs read:

in the constructor
got ref R…s.c…s.Constructor {props: Object, context: Object, refs: Object, updater: Object, state: null…}
in componentDidMount
got ref null
got ref R…s.c…s.Constructor {props: Object, context: Object, refs: Object, updater: Object, state: null…}

The null ref is confusing to me since the ref'd view isn't unmounted nor is its parent. I believe this is under 0.14 beta 1 (whatever RN master uses).

[syranide]

Can confirm with ReactDOM 0.14.0-beta1 👍

class Example extends React.Component {
  render() {
    return <div ref={c => { console.log(c); }} />;
  }

  componentDidMount() {
    this.setState({});
  }
}

<div data-reactid=​".0">​</div>​
null
<div data-reactid=​".0">​</div>​

[jimfb]

Sounds like a bug to me, cc @spicyj just in case this is expected behavior. Marking as 0.14 milestone under the assumption that this is a regression.

[sophiebits]

Yes, this seems wrong. refs should only be called when a component is mounted or unmounted.

[sophiebits]

Never mind, this is actually right after all (and the same as 0.13). The function instance is different so we pass null to the old one and the component to the new one.

[ide]

@spicyj Whoa, OK. Thanks for looking into it.

[unel]

@spicyj

The function instance is different so we pass null to the old one and the component to the new one.

But... why?.. And why is this not reflected in the documentation? :'(

[gaearon]

@unel

But... why?

Because the function instance is different on every render. React doesn't know it's the same function "conceptually". Maybe you were passing callback1 and now pass callback2. So it needs to reset the ref for callback1 (since it might never get called again) and then set the ref for callback2 (since it's the new one).

This could be added to the documentation but I'm not sure why it matters. Can you help me understand? If you just set a field in the ref callback you shouldn't have to think about this.

[unel]

@gaearon
I think it's a very important clarification, because in most cases callback1 and callback2 "conceptually" - same and don't expects this behaviour on each render ("Why is my callback called with null, when this component not unmounted?")

And the second reason - the count of calls. 2 calls for whole child component lifecycle obviously less than 2+2*render calls count... For "heavy" handlers it's may be critical.

[gaearon]

2 calls for whole child component lifecycle

I'm not sure what you mean. Ref calls should be very cheap because they typically just set a reference. If there is a bottleneck, it likely won't be there.

I think it's a very important clarification

Please feel free to send a doc PR!

[unel]

@gaearon

Please feel free to send a doc PR!

https://github.com/facebook/react/pull/8333/files =)

[saiki-k]

@gaearon

This could be added to the documentation but I'm not sure why it matters. Can you help me understand? If you just set a field in the ref callback you shouldn't have to think about this.

Please correct me if I am wrong — Whenever a new instance of a component is mounted, in the presence of an old instance; the ref callback of the old component instance is called with null, right?

The problem becomes apparent when you have multiple instances of the same component mounted one after the other, and when some logic inside the component is dependent on the component instance, set through the ref callback. Learned this the hard way... :)

[gaearon]

@fatman- Can you show a minimal example demonstrating the problem? As long you don't change the type and key, you should get the same instance in ref right after getting null. So in most cases it is unobservable to any code other than ref callback itself.