Before using React . I was a Vue developer.

We know in Vue, ref is a special attributes. ref used to register a reference to an element or a child component. The reference will be registered under the parent component’s $refs object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance.

Let's give an example 🌰 if we want to get context2d instance of this canvas , we should get the canvas element itselft first . So we add a ref attributes.

<canvas ref="canvas" />

And then we got that in mounted function .

mounted () {
  const 2d = this.$refs.canvas.getContext('2d');
}

For the first time I used react . I guess React also can do that . So i pass a string to ref , then i got plain object successfully . I thought everything was so for granted . But i am wrong.

I realized this is a mistake when one day i was looking at the source code of a component.

I found that it componet author did not use string and it was using callback function . Why he used callback instead of string . Provoked my curiosity.

I started looking for reasons at Google , Soon I found a react issues.

We can see gaearon say ref="string" is a flawed pattern. There are multiple problems with it:

• It requires that React keeps track of currently rendering component (since it can't guess this). This makes React a bit slower.
• It doesn't work as most people would expect with the "render callback" pattern (e.g. ) because the ref would get placed on DataGrid for the above reason.
• It is not composable, i.e. if a library puts a ref on the passed child, the user can't put another ref on it (e.g. #8734). Callback refs are perfectly composable.

And someone ask him ....

It doesn't work as most people would expect with the "render callback" pattern (e.g. ) because the ref would get placed on DataGrid for the above reason.
@gaearon Could you please elaborate more, what's the ref declaration and use in your example?

That is example

class MyComponent extends Component {
  renderRow = (index) => {
    // This won't work. Ref will get attached to DataTable rather than MyComponent:
    return <input ref={'input-' + index} />;

    // This would work though! Callback refs are awesome.
    return <input ref={input => this['input-' + index] = input} />;
  }
 
  render() {
    return <DataTable data={this.props.data} renderRow={this.renderRow} />
  }
}

So we use callback as much as possible instead of string . Because maybe one of the string will be discarded.We can see more in official document