What are forward refs?

[idev0085]

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

import React from "react";
import ChildRef from "./child";
class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    componentDidMount() {
        this.myRef.current.focus();
    }

    render() {
        return (
            <div className="center">
                <ChildRef ref={this.myRef} />
            </div>
        );
    }
}
export default Refs;

import React from "react";
import "./style.css"
class ChildRef extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        console.log(this.props)
        return (
            <input type="text" ref={this.props.forwardRef} />
        );
    }
}
export default React.forwardRef((props, ref) => <ChildRef {...props} forwardRef={ref} />)