React, JS - functionality difference in different ways of using refs

in first case you have link to the div in this.myRef.current when it mounts to DOM.

in second case you pass function as ref. This function will receive as first argument your node (div). And you can manipulate it in this function

<div ref={node => {
    console.log(node);
    // do something useful with node
}}/> 

It's difficult to say without context, but probably this.myRef is not set in the first case. If you want to use the first option, you need to manually set it (by using something like React.createRef()), see the react docs on this.

The are same basically. But with the 2nd method you get more control. You can pass more parameters with the 2nd method.

import React, { Component } from "react";

class App extends Component {
constructor(props) {
super(props);
this.setTextInputRef = (element, name) => {
  this.textInput = element;
  this.x = name;
};
}
componentDidMount = () => {
if (this.textInput) {
  this.textInput.focus();
  console.log(this.x);
}
};

render() {
return (
  <div>
    <input
      placeholder="Input"
      ref={e => this.setTextInputRef(e, "hello")}
    />
  </div>
);
}
}

export default App;

Run this example. Home this helps

The ref prop provides you the element instance to set as React reference. When you do

<div ref={this.myRef} />

nothing is set as the reference so the variable this.myRef don't know which element to store.

Otherwise

<div ref={(elem) => {this.myRef = elem;}}/> 

This code provides you the element to store as reference by it's elem param. Now the this.myRef knows which element to store as reference.