ref={...} gets now called before element exists in DOM (?)

[cmaster11]

After updating from ~7 to latest (8.2.1), I noticed this curious behavior:

When using ref={(el) => ...} over a div element (my case), with the previous version I was able to use el.parentNode to traverse up the DOM tree and get refs to parents and so on.

With new version, el.parentNode is undefined, which makes me think the element gets generated but not yet inserted in the DOM tree? I can't figure out if this is a bug or if it's just a side-effect related to an improvement introduced in the last releases.

[developit]

It was a change in 8, yes. I would recommend avoiding tree traversal from within a ref, it's not what refs are designed for. They're purpose is to allow you to store a reference and nothing more. If you want to traverse the tree, it's best to do so from a lifecycle event:

class Foo extends Component {
  fooRef = c => {
    this.foo = c;
  };

  componentDidMount() {
    // use the ref
    let parentWidth = this.foo.parentNode.offsetWidth;
  }

  render() {
    return <div ref={this.fooRef} />
  }
}

[cmaster11]

Thank you for the reply, I guess it's time to change some code here then! ;)

[marvinhagemeister]

We've fixed this for Preact X for which the code just landed in master via #1302 . An alpha release should be available soon 👍