Ref gives the wrong element after the first render

[chrisdavies]

I have a component called AppPane which has this render method (simplified):

render({children}) {
    return (
      <div ref={el => {
          console.log(el)
          this.rootEl = el
        }}>
        {children}
      </div>
    )
  }

The first console.log correctly logs the div element. But subsequent renders log AppPane. I can still access this.rootEl.base to get access to the div, so I do have a workaround.

[developit]

Hi Chris - to clarify: is the subsequent re-rendering triggered by setState()/forceUpdate()?

[chrisdavies]

Hey. Sorry. It's by setState in a parent component. Basically, I have state in a parent that is determining which AppPane is current.

[chrisdavies]

I can try to put together a small example.

[developit]

would be useful. Try webpackbin.com if you haven't yet, it's awesome. 👍

[chrisdavies]

I'd never heard of webpackbin... It is awesome.

Here's the repro. You can click anywhere on the screen to increment the counter. Open up the browser console and you'll see the issue:

http://www.webpackbin.com/E1WAAp22x

[developit]

Fix for this is released in 4.3.0.
Confirmed, fixes your repro: http://www.webpackbin.com/VJXWiDp2e