React: ref.current returns null when ref returns current.div. ...

[waynevanson]

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

What is the current behavior?

When accessing ref.current using the useRef hook, it returns null even when it's clearly linked to the div element.

const MyComponent:FC = props => {
  const ref = useRef<HTMLDivElement>(null);
  console.log({{ ref, current: ref.current })
  //  { ref: { current: div }, current: null }
  // `null` is not what it is supposed to be!
  return <div ref={ref} />
}

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/embed/refcurrent-is-null-1nvlw

What is the expected behavior?

const MyComponent:FC = props => {
  const ref = useRef<HTMLDivElement>(null);
  console.log({{ ref, current: ref.current })
  //  { ref: { current: div }, current: div }
  //  `div` is what we want to see!
  return <div ref={ref} />
}

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I ran yarn create react-app --info in my app.

Environment Info:

  System:
    OS: Linux 5.2 Ubuntu 19.10 (Eoan Ermine)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.15.2 - /tmp/yarn--1567669486663-0.4246551671762293/node
    Yarn: 1.17.3 - /tmp/yarn--1567669486663-0.4246551671762293/yarn
    npm: Not Found
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: Not Found
  npmPackages:
    react: ^16.9.0 => 16.9.0 
    react-dom: ^16.9.0 => 16.9.0 
    react-scripts: 3.1.1 => 3.1.1 
  npmGlobalPackages:
    create-react-app: Not Found

[eps1lon]

Explanation is likely inaccurate but it has to do with when dev tools evaluate the logged object.

console.log({ ref }) will create an object pointing to ref. Meaning object.ref.current will evaluate to whatever instance is currently assigned. { current: ref.current } will create an object in which current points litterally to the current value of ref which is null.

So yes this is a bit confusing but it definitely should log null since that's what ref.current is in the first render pass.

[threepointone]

^ what @eps1lon said is correct. Closing since this isn't a bug or feature request, more of a javascript/console tooling quirk. Thanks for the question!

[waynevanson]

Internally it still stays null, which I'll check in sandbox soon.

If I do if (ref.current !== null) console.log(ref.current), it wont log because it's always null.

EDIT: I updated the example to include and if/else for the ref.current !=== null: https://codesandbox.io/embed/refcurrent-is-null-internally-1nvlw

Please reopen?

[threepointone]

ref.current will be null on first render, until the div gets committed and the ref is set. The component does not rerender when refs are set, so the console.log will not run a second time.

[threepointone]

Here's a version of your code, but with an onClick handler on the top level div. You'll see that clicking on the div logs the value of ref.current, which is the div https://codesandbox.io/s/refcurrent-is-null-internally-weio5

[waynevanson]

The component does not rerender when refs are set

Wow, that's the game changer. There clearly something in the lifecycle that I do not understand properly.

I see. I used useEffect with a console log and it showed up, so it mustn't rerender.

Thank you for your help and extremely speed response!