9

I have an old code which is using findDOMNode().

Here is my code, where someComponent1 and Expand is already imported.

Here I have some doubt the code I have written with findDOMNode() is working perfectly fine but as it is deprecated now I want to remove it. I have gone through many document and found to use portals or refs instead of this. I have a understanding that if I am using ref then the variable get bind to that also has an access to the DOM element, but I guess I am wrong as it is working in that way. Can someone please correct my understanding on this

class classA extends Component {

  componentDidMount() {
    new Expand(ReactDOM.findDOMNode(this.expand))
    // new Expand(this.expand)    
  }

  render(){

    return(
      <someComponent1 className={style.container} ref={e => this.expand= e}/>
    )
  }
}
norbitrial
  • 14,716
  • 7
  • 32
  • 59
Bishal Jain
  • 189
  • 1
  • 2
  • 10

1 Answers1

6

As per this github issue and ReactDocs,ReactDOM.findDOMNode is not deprecated but its usage is discouraged and should only be used as an escape hatch. In order to replace it, you need to specify the ref on the DOM element which in your case would look like

class classA extends Component {

  componentDidMount() {
     new Expand(this.expand)    
  }

  render(){

    return(
      <SomeComponent1 className={style.container} innerRef={e => this.expand= e}/>
    )
  }
}

class SomeComponent1 extends React.Component {
    render() {
       return <div ref={this.props.innerRef}>Hello</div>
    }
}
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • 2
    Now it definitely is (at least in the strict mode): https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage – jayarjo Feb 19 '19 at 16:41
  • This is very sad because I have a use-case for it, when I need to parse the `children` prop, deeply, before it is actually rendered, as it is rendered with a random delay, but I must ignore this delay and still get the `textContent` of an unknown structure of `children` prop – vsync Dec 08 '22 at 12:27