Refs over findDOMNode()

Use callback refs over findDOMNode()

Note:
React also supports using a string (instead of a callback) as a ref prop on any component, although this approach is mostly legacy at this point.

findDOMNode(this)
Before:
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     findDOMNode(this).scrollIntoView();
  4.   }
  6.   render() {
  7.     return <div />
  8.   }
  9. }
After
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     this.node.scrollIntoView();
  4.   }
  6.   render() {
  7.     return <div ref={node => this.node = node}/>
  8.   }
  9. }
findDOMNode(stringDOMRef)
Before
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     findDOMNode(this.refs.something).scrollIntoView();
  4.   }
  6.   render() {
  7.     return (
  8.       <div>
  9.         <div ref='something'/>
  10.       </div>
  11.     )
  12.   }
  13. }
After
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     this.something.scrollIntoView();
  4.   }
  6.   render() {
  7.     return (
  8.       <div>
  9.         <div ref={node => this.something = node}/>
  10.       </div>
  11.     )
  12.   }
  13. }
findDOMNode(childComponentStringRef)
Before:
  1. class Field extends Component {
  2.   render() {
  3.     return <input type='text'/>
  4.   }
  5. }
  7. class MyComponent extends Component {
  8.   componentDidMount() {
  9.     findDOMNode(this.refs.myInput).focus();
  10.   }
  12.   render() {
  13.     return (
  14.       <div>
  15.         Hello,
  16.         <Field ref='myInput'/>
  17.       </div>
  18.     )
  19.   }
  20. }
After
  1. class Field extends Component {
  2.   render() {
  3.     return (
  4.       <input type='text' ref={this.props.inputRef}/>
  5.     )
  6.   }
  7. }
  9. class MyComponent extends Component {
  10.   componentDidMount() {
  11.     this.inputNode.focus();
  12.   }
  14.   render() {
  15.     return (
  16.       <div>
  17.         Hello,
  18.         <Field inputRef={node => this.inputNode = node}/>
  19.       </div>
  20.     )
  21.   }
  22. }

Related links: