Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Table of Content

Prerequisites:

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.


Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads