Which is preferred option with in callback refs and findDOMNode() in ReactJS ?

ReactJS employs two prominent concepts, namely callback refs and `findDOMNode()`, for effective DOM manipulation. These mechanisms facilitate access to DOM elements, enabling the implementation of diverse changes such as hiding or showing elements, altering styles, and focusing on specific elements.

Prerequisites:

• Node JS or NPM
• React JS
• Callback refs
• findDOMNode()

Steps to Create React Application And Installing Module:

Step 1: Create a react application using this command:

npx create-react-app gfg-project

Step 2: After creating your project folder i.e. gfg-project, move to it using this command:

cd gfg-project

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

findDOMNode():

findDOMNode() was very popular for returning the DOM of any element in the class-based component. But after React v16.3 it was discouraged but till now it is used for certain use cases. But there is a chance that it might get removed from the future version of React.

If the component renders a null value then, in that case, it returns a null value and if the component will render a string value then, in that case, it will return that value.

Syntax:

ReactDOM.findDOMNode(Instance of the component);

Steps to use findDOMNode():

• Make a js file in the src folder. let us say “Gfg.js”
• Make a class component “Gfg” and export that.
• After that import that component into our App.js and use it there
• Now in our Gfg component make an element let us say div with some text and with an id.
• After that import “ReactDOM” from “react-dom” in that Gfg.js
• Make a method in that class component. let us say we made manDOM() method.
• In that method select that element by “getElementById” and then select that by ReactDOM.findDOMNode()
• After that do whatever changes you want to apply on the DOM of this element
• So here we are adding the background color of that element as “yellow” by calling that method on a button click.

Example:

Javascript

import React from "react";
import ReactDOM from "react-dom";

class Gfg extends React.Component {
    manDOM = () => {
        var ele = document.getElementById("mydiv");
        var a = ReactDOM.findDOMNode(ele);
        a.style.backgroundColor = "yellow";
    };
    render() {
        return (
            <>
                <h1 className="gfg">GeeksforGeeks</h1>
                <h3 className="gfgdom">findDOMNode() in React</h3>
                <div id="mydiv">Testing</div>
                <button onClick={this.manDOM}>Change</button>
            </>
        );
    }
}
export default Gfg;

Steps to Run the application: After that run your application using the following command:

npm start

Output:

Output

Callback refs:

Callback refs stand out as a crucial concept in ReactJS for DOM manipulation. When manipulating the DOM using refs, we pass a ref, created with “React.createRef” in class components and “useRef” in functional components, directly to the element to gain access to it.

Steps to use Callback ref:

• Make a js file in the src folder. let us say “Gfg.js”
• Make a class component “Gfg” and export that.
• After that import that component into our App.js and use it there
• Now in our Gfg component make an element let us say div with some text
• Make a property and assign null to that. let us say we made “inRef” and assigned null to that.
• Make a method/function which we pass as a callback function in that element.
• In that method/function, we will select that element into our made property i.e inRef
• Now after that, we can do whatever necessary changes we want to apply to the DOM of that element
• So we made a method/function and in that wrote the code to change the background color of that element to yellow
• Then called that function on a button click

Example:

Javascript

import React from "react";

class Gfg extends React.Component {
    constructor() {
        super();
        this.inRef = null;
    }

    setCallbackRef = (node) => {
        this.inRef = node;
    };

    manDOM = () => {
        this.inRef.style.backgroundColor = "yellow";
    };
    render() {
        return (
            <>
                <h1 className="gfg">GeeksforGeeks</h1>
                <h3 className="gfgdom">callback ref in React</h3>
                <div ref={this.setCallbackRef}>Testing</div>
                <button onClick={this.manDOM}>Change</button>
            </>
        );
    }
}
export default Gfg;

Steps to Run the application: After that run your application using the following command:

npm start

Output:

Output

Reason behind the preference of callback refs over findDOMNode():

• findDOMNode() is deprecated in the StrictMode. It may be removed from the react in its future updates. So if we still want to use findDOMNode() then we shouldn’t place our App Component in “React.StrictMode” within index.js
• We shouldn’t use findDOMNode() because if it gets deprecated from the react in its future version, then again we have to replace that with refs/callback refs, which will take extra effort.
• According to React docs findDOMNode() only accepts instance of class component.That’s why it can’t be used with the functional components.