React: Ref callbacks are not called at componentDidUpdate

[iOiurson]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Refs documentation states:

ref callbacks are invoked before componentDidMount or componentDidUpdate lifecycle hooks.

However, it seems that no ref callback is called at all when update occurs.

Closest things similar are https://github.com/facebook/react/issues/12034, https://github.com/facebook/react/issues/9328, https://github.com/facebook/react/issues/11650.

I'm a bit confused, because it seems nobody ever experienced something like this, so I might be misunderstanding something.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/r52qonw0o

Here is a copy of the code in the link:

import React from "react";
import { render } from "react-dom";

const styles = {
  margin: "20px auto",
  padding: "10px",
  width: "100px",
  border: "1px solid black",
  "text-align": "center",
  cursor: "pointer",
};

class Test extends React.Component {
  test(e) {
    console.log("Ref callback");
  }

  constructor() {
    super();
    this.state = {
      number: 0
    };

    setTimeout(() => {
      this.setState({ number: Math.random() });
    }, 1000);

    this.update = this.update.bind(this);
  }

  update() {
    this.setState({ number: Math.random() });
  }

  componentDidUpdate() {
    console.log("Updated");
  }

  render() {
    return (
      <div onClick={this.update}>
        Testing componentDidUpdate with Ref callbacks
        <div ref={this.test} style={styles}>Click Me</div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return <Test />;
  }
}
render(<App name="world" />, document.getElementById("root"));

What is the expected behavior?
"Ref callback" should be logged just before "Updated" is logged.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tried several versions of React (15.6.1, 16.1.1, 16.2.0), with Chrome 64.
I'm running MacOS 10.13.3

[TrySound]

@iOiurson It's not called every time before didUpdate. You already got element, you don't need it to be assigned again. Docs mean different lifetime between component and ref on its child. For example if you will add or remove component with ref prop from react dom after didMount or before willUnmount then ref callback will be called before didUpdate

[gaearon]

Maybe we should change docs to say “Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.” Feel free to send a PR.