React: Losing ref values

Question

I am using two components and I am using this pattern: child component should stay isolated as much it can - it is handling its own validation error. Parent component should check for errors which have dependencies between children. So, in my case: password field and password confirmation field.

Here is my code:

a) SignUp (parent)

Setting initial state.

 constructor() {
     super();

     this.state = {
         isPasswordMatching: false
     };
 }

In render() method I am outputting my child component. Through prop called callback I am propagating method isPasswordMatching() by binding parent's this. The goal is that method can be called within child component.

<TextInput
    id={'password'}
    ref={(ref) => this.password = ref}
    callback={this.isPasswordMatching.bind(this)}
    // some other unimportant props
/>

<TextInput
    id={'passwordConfirm'}
    ref={(ref) => this.passwordConfirm = ref}
    ...

isPasswordMatching() method is checking if passwords match (through refs this.password and this.passwordConfirm) and then updates state. Please note that this method is called inside child (password or passwordConfirm).

isPasswordMatching() {
    this.setState({
        isPasswordMatching: this.password.state.value === this.passwordConfirm.state.value
    });
}

b) TextInput (child)

Setting initial state.

constructor() {
    super();

    this.state = {
        value: '',
        isValid: false
    };
}

On blur validation is done and state is updated.

onBlur(event) {

    // doing validation and preparing error messages

    this.setState({
        value: value,
        isValid: this.error === null
    });
}

Latest. Callback prop is called.

componentDidUpdate(prevProps) {
    if (prevProps.id === 'password' || prevProps.id === 'passwordConfirm') {
        prevProps.callback();
    }
}

Issue

Somehow my refs are lost. Scenario:

1. Parent component is renderder
2. Child components are rendered
3. I am entering one of input fields and get out (this invokes onBlur() method) - state gets updated, child component is rendered
4. componentDidUpdate() is invoked and prevProp.callback() as well
5. When going to isPasswordMatching() method I am outputting this.password and this.passwordConfirm - they are objects with expected values of reference. Updating state of parent - component gets rendered.
6. Then again all children are rendered, components get updated, callback is called but this time this.password and this.passwordConfirm are null.

I have no idea why references are kinda lost. Should I be doing something differently? Thank you in advance.

Answer 1

See the react documentation here, with important warnings and advise about when to use or not to use refs.

Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with null as an argument. This prevents memory leaks in the case that the instance is stored, as in the second example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with null immediately before it's called with the component instance.