React.createRef always null

Question

I am probably doing something really stupid here, but for the life of me, I cannot figure out why ref is always null.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    console.log(this.myRef);
  }

  componentDidMount() {
    console.log(this.myRef);
  }

  componentWillUnmount() {
    console.log('unmounting');
  }

  render() {
    console.log(this.myRef);
    return (
      <div ref={this.myRef}>
        foobar
      </div>
    );
  }
}

Console:

{current: null}
{current: null}
{current: null}

I am on React 16.3. What am I missing?

Answer 1

omg, I was on react 16.3 but react-dom 16.2. bumping react-dom to 16.3 fixed the issue.

Answer 2

I used this.myRef.value that retured me null. Now I use this.myRef.current that works!