In this article, we will discuss about refs in React, how we can create refs and where can refs be used.
What are 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 have wide functionality as we can use callbacks with them.Â
Creating refs in React
Refs can be created using React.createRef() function and attached it with the React element via the ref attribute. When a component is constructed the Refs are commonly assigned to an instance property so that they can be referenced in the component.Â
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myCallRef = React.createRef();
}
render() {
return <div ref={this.myCallRef} />;
}
}
Accessing Refs in React
In React, A reference to the node becomes accessible at the current attribute of the ref when a ref is passed to an element in the render.
const node = this.myCallRef.current;
Now, we are going to see how we can use refs in our code which will help you to understand the use case of refs better.
Example:Â In this example, we use the target value of event e, for getting the value. Â
Javascript
// without refsclass 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')); |
Output:Â
Example: In this example, we use the refs provided by React, to add a callback function.
Javascript
// using refsclass 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')); |
Output:Â
Example:Â In this example, we use the refs provided by React, to add a callback function
Javascript
// callback used inside refclass 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')); |
Output:Â
When to use refs
- Helpful when using third-party libraries.
- Helpful in animations.
- Helpful in managing focus, media playback, and text selection.
When not to use refs
- Should not be used with functional components because they don’t have instances.
- Not to be used on things that can be done declaratively.
- When using a library or framework that provides its own methods for managing such as Redux or MobX.
We have discussed this in detail with different methods of How to Create refs in the ReactJS article you can learn more about it.
[…] Approach 2: Using Refs […]