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?

Works for me too. Check this link to understand more about refs https://reactjs.org/docs/refs-and-the-dom.html — Hemadri Dasari, Aug 17 '18 at 01:29
There must be some side effect from my other code. It works standalone as you pointed out. But I use that code in one of my project's components, I see `{current: null}`. So bizarre. — deruse, Aug 17 '18 at 01:31
@deruse `this` issue? You can put more codes for us to check out. — NoobTW, Aug 17 '18 at 01:35
Share your other component code from wr MyComponent gets called to understand better — Hemadri Dasari, Aug 17 '18 at 01:35
CAn you try doing console log of this.myRef in render before return instead of componentDidMount and check. This should print current node when it is getting called from other component. Perhaps MyComponent is unmounted by the time its getting called and that’s why you see null — Hemadri Dasari, Aug 17 '18 at 01:41
Still `{current: null}`. The other code is just a App.jsx which calls this component for a specific route. I have simplified it to just render on the client (no server side rendering), but that didn't help... — deruse, Aug 17 '18 at 01:43
omg, I was on react 16.3 but react-dom 16.2. bumping react-dom to 16.3 fixed the issue. — deruse, Aug 17 '18 at 01:50
Great. Put that as an answer so that others will be benefitted — Hemadri Dasari, Aug 17 '18 at 02:47
I was adding `ref={this.myRef}` in a component that time it was showing `{current: null}` because that component data not loaded at same time. So, I used `setTimeout` in `componentDidMount` then it was working. So, next time I used myRef in exact component and it was working. my need was to find that component element height. So, I used `const height = this.myRef.current.clientHeight;` in `componentDidMount`. — Arpit, Nov 16 '18 at 17:55

score 12 · Answer 1 · answered Aug 18 '18 at 03:01

12

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

answered Aug 18 '18 at 03:01

deruse

2,851
7
40
60

score 1 · Answer 2 · answered Sep 17 '18 at 15:50

1

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

answered Sep 17 '18 at 15:50

Nikita Chernykh

270
1
4
18

score 0 · Answer 3 · answered Jan 31 '19 at 00:24

0

It could also be due to your element not mounting at componentDidMount()

Instead try printing the value inside of a componentDidUpdate()

answered Jan 31 '19 at 00:24

Eduardo Portet

227
2
7

React.createRef always null

3 Answers3