ReactJS | Refs

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. They are used in cases where we want to change the value of a child component, without making use of props and all. They also provide us with good functionality as we can use callbacks with them.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// without refs
class App extends React.Component {
  constructor(){
   super();
   this.state = { sayings: ""};
   }
  update(e){
   this.setState({ sayings: e.target.value});
  }
  render(){
   return (
    <div>
     Mukul Says <input type="text" onChange = {this.update.bind(this)}/>
    <br/>
    <em>{this.state.sayings}</em>
   </div>
  );
 }
}
ReactDOM.render(< App />, document.getElementById('root'));

chevron_right


Output:

In the above example, we are making use of the target value of event e, for getting the value of what Mukul is saying. This above output can also be acheived by using the refs.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// using refs
class App extends React.Component {
 constructor(){
  super();
  this.state = { sayings: ""};
 }
 update(e){
  this.setState({ sayings: this.refs.anything.value});
 }
 render(){
  return (
   <div>
    Mukul Says <input type="text" ref="anything"
      onChange = {this.update.bind(this)}/>
   <br/>
   <em>{this.state.sayings}</em>
  </div>
  );
 }
}
 ReactDOM.render(< App />, document.getElementById('root'));

chevron_right


Output:

In the above we make use of refs provided by React, they can also be used to add callback functions inside them which is helpful in many cases.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// callback used inside ref
class App extends React.Component {
  constructor(){
   super();
   this.state = { sayings: ""};
  }
  update(e){
   this.setState({ sayings: this.a.value});
  }
  render(){
   return (
    <div>
     Mukul Says <input type="text" 
     ref={(call_back) => {this.a = call_back}} onChange = 
     {this.update.bind(this)}/>
   <br/>
   <em>{this.state.sayings}</em>
   </div>
  );
 }
}
ReactDOM.render(< App />, document.getElementById('root'));

chevron_right


Output:

When to use refs

  • Helpful when using third party libraries.
  • Helpful in animations.

When not to use refs

  • Should not be used with functional components because they dont have instances.
  • Not to be used on things that can be done declaritvely.


My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.