Callback ref is passed null and then the component again

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).

[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.