Refs and the DOM in React

In React, managing focus, text selection, or media playback is often done through the use of refs. Refs provide a way to access DOM nodes or React elements directly, enabling developers to interact with them when necessary.

Refs are a special attribute that can be attached to React elements to obtain a reference to a DOM node or a class component instance. They are mainly used for:

• Accessing a DOM element directly.
• Storing a mutable value that doesn't cause re-renders when updated.
• Integrating with third-party libraries that manipulate the DOM.

Refs can be created using React.createRef() and are typically assigned to class components or functional components using the ref attribute.

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

    render() {
        return 
Hello, Ref!
;
    }
}
                

To interact with a ref, you can access its current property, which points to the DOM node or component instance:

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

    componentDidMount() {
        // Accessing the DOM node
        this.myRef.current.focus();
    }

    render() {
        return ;
    }
}
                

When using refs, consider the following best practices:

• Use refs sparingly and only when necessary.
• Avoid using refs to manage state.
• Prefer using state and props over refs for data flow.
• Cleanup any event listeners or intervals in componentWillUnmount.