Grandchild component with ref throwing error when conditionally rendered.

[ethib137]

import Component, {Config} from 'metal-jsx';

class Child extends Component {
    render() {
        return <div>{this.props.children}</div>;
    }
}

class GrandChild extends Component {
    render() {
        return <div>{this.props.children}</div>;
    }
}

class TestKit extends Component {
    created() {
        this.handleClick_ = this.handleClick_.bind(this);
    }

    handleClick_() {
        this.state.visible_ = !this.state.visible_;
    }

    render() {
        return (
            <div>
                <a href="javascript:;" onClick={this.handleClick_}>{'Toggle'}</a>

                {this.state.visible_ &&
                    <Child>
                        <GrandChild ref="grandChild">
                            {'Child Component'}
                        </GrandChild>
                    </Child>
                }
            </div>
        );
    }
}

TestKit.STATE = {
    visible_: Config.value(true)
};

export default TestKit;

Steps to Reproduce:

1. Toggle to hide.
2. Toggle to show.

Result: Error Thrown.

Uncaught TypeError: Cannot read property 'startSkipUpdates' of null

I noticed that IncrementalDomRender is trying to call getRenderer() on a component that has already been disposed. Since disposing a component sets renderer_ to null, this throws an error.

Let me know if you have any questions.

Thanks.

[mairatma]

Thanks! I know now what is causing this, and will publish a fix soon.

[mairatma]

The fix for this is now available at version 2.2.2.