Refs Via createRef()

Learn how to simplify the creation of refs and assign the resulting ref to an element.

What is the createRef() method?

With React 16.3, we have seen the introduction of the top-level API method React.createRef(). It resembles the usage of callback refs but differs in a few ways. Just like callback refs, you also need to take care of ref handling yourself, and it is still common practice to assign the ref to an instance property.

The reference is already created during the instantiation of the component, which is then given to the ref prop of the element instead of passing an almost identical method each time in the form:

(el) => { this.property = el }

Code example

Let’s illustrate with an example.

Get hands-on with 1200+ tech skills courses.