How does React.createRef() actually work?

Question

I went through React docs for React Refs, and this what it says about createRef()

createRef() receives the underlying DOM element as its current property. When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current .

I have some questions on this. First have look at below component.

import React, { Component } from "react";

class ImageCard extends Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
    console.log("Called in constructor", this.imageRef);
  }

  componentDidMount() {
    console.log("Called when component did mount ", this.imageRef);
  }

  render() {
    const { description, urls } = this.props.image;
    return (
      <div>
        <img ref={this.imageRef} src={urls.regular} alt={description} />
      </div>
    );
  }
}

export default ImageCard;

So, in the constructor I created a React Ref, and assigned to a property called imageRef. And, in the render() method, I passed that React Ref to img React element as an attribute as a ref.

What does React Ref does here?

img will eventually become an object which has a property called ref with value this.imageRef, how it receive img as it's current property?

If it was something like this this.imageRef.current = img(object), It can be possibly. But I don't understand the above way i.e ref={this.imageRef}

Also, For both console statements this is the output that I get.

So, in the constructor current property is null that is valid. But, when I expand it, It has all properties that of img printed in componentDidMount i.e also clinetHeght How?

I don't know, If there is short explanation for this or someone have to right a full page. If that's too big to answer, external links or references would be helpful.

I also am not interested in nitty-gritty of library implementation, just an overview would be helpful so that I can use React.createRef() with confidence or without any doubt.

Answer 1

For how ref gets assigned, you have to remember that JSX compiled down to plain old javascript. A very simplified example of what is going on under the covers is something like this:

function createRef(initialValue) {
    return {
        current: initialValue
    }
}

const root = document.getElementById('root');

function render(elementType, innerText, ref) {
    const el = document.createElement(elementType);
    if (ref) {
        ref.current = el;
    }
    el.innerText = innerText;
    root.replaceChildren(el);
}

const ref = createRef(null);
console.log(ref);
render('div', 'Hello World', ref);
console.log(ref);
    

<div id="root"></div>

So basically - when you use <img ref={this.imageRef} src={urls.regular} alt={description} />, the ref is passed as a property, and in the function that renders it, it assigns the actual DOM node to ref.current.