React: Property `current` of `ref`

[liril-net]

I was puzzled when using property current to access ref of DOM or component, current is the only property that I can access in ref object, what is the purpose of this property?

this.inputRef.current.focus()
this.inputRef.focus() // Isn't this a better way to use ref?

[TrySound]

@liril-net https://github.com/reactjs/rfcs/blob/master/text/0017-new-create-ref.md#basic-example

[liril-net]

@TrySound But what is the benefit of doing so? Some performance concern?

[TrySound]

@liril-net No. You pass your ref to the component. The component need to update this ref. With this case it's not possible.

const component = ({ ref }) => {
  ref = new Element
}
const ref = null
component({ ref })

That's why createRef is object with mutable field, which can be updated by component.

const component = ({ ref }) => {
  ref.current = new Element
}
const ref = { current: null }
component({ ref })

[liril-net]

Thanks for your reply.

[gaearon]

To be clear React itself will set the current property. Not a component.