Refs in React

Creating Ref

Ref is created using React.createRef() and attached to the element via the ref attribute.

export class MyComponent extends React.Component {  
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    render() {
        return <input ref={this.myRef} />;
    }
}

Callback Refs

Apart from passing a component's property, we can also pass a function via the ref attribute. This function receives the HTML element or the React component instance as its argument. This instance can be stored and accessed elsewhere.

class MyComponent extends React.Component {
    public render() {
        return <input ref={(el) => this.myRef = el} />;
    }
}

Accessing Ref

After rending phase, a reference to the node becomes accessible at the current attribute of the ref.

export class MyComponent extends React.Component { 
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    componentDidMount() {
        console.log(this.myRef.current); // <input>
    }

    render() {
        return <input ref={this.myRef} />;
    }
}

Depending on the type of the node, the value of the current attribute can refer to the HTML element or custom component.

• if the ref attribute is used on an HTML element, the current attribute refers to the DOM element

export class MyComponent extends React.Component {  
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    componentDidMount() {
        console.log(this.myRef.current); // <input>
    }

    render() {
        return <input value="abc" ref={this.myRef} />;
    }
  }

• if the ref attribute is used on a custom class component, the current attribute refers to the instance of that component

class MyComponent extends React.Component {
    render() {
        return <div>xyz</div>;
    }
}

class App extends React.Component {  
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    componentDidMount() {
        console.log(this.myRef.current); // <MyComponent>
    }

    render() {
        return <MyComponent ref={this.myRef} />;
    }
  }

React will assign the node to the current attribute when the component mounts and will set it back to null when the component unmounts.

Forwarding Refs

Ref forwarding is a technique for passing a ref through a component to one of its children.

const MyComponent = React.forwardRef((props, ref) => (
    <button ref={ref}>click me</button>
));

class App extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }

    public componentDidMount() {
        console.log(this.myRef.current); // <button>
    } 

    public render() {
        return <MyComponent ref={this.myRef} />;
    }
}