YouTipReact Refs
React supports a very special attribute called **Ref**, which you can use to bind to any component returned by the render() method.
This special attribute allows you to reference the corresponding backing instance returned by render(), ensuring you always get the correct instance at any time.
In React, Refs (references) provide a way to access DOM elements or component instances. Using Refs allows you to directly manipulate DOM elements or obtain child component instances, which is useful for handling focus, text selection, media playback, triggering forced animations, or integrating third-party DOM libraries.
### Usage
Use React.createRef or useRef to create and access refs.
React.createRef is typically used in class components, while useRef is a Hook typically used in function components.
Additionally, binding `this` in event handlers can also be achieved through class property syntax to avoid creating a new function on every render.
* **Creating a Ref**: In the constructor of a class component, use `React.createRef` to create a ref object and assign it to a property of the component instance.
* **Binding a Ref**: In the `render` method, bind the ref object to the DOM element you want to reference.
* **Accessing a Ref**: In other methods of the component, access the bound DOM element via `this.myInputRef.current`, allowing you to manipulate its properties and methods.
### Complete Example
You can get the current React component using `this`, or get a reference to the component using `ref`, as shown in the example:
## React Example
class MyComponent extends React.Component{constructor(props){super(props); this.myInputRef = React.createRef(); }handleClick = () =>{this.myInputRef.current.focus(); }render(){return(); }}
[Try it »](#)
In this example, we obtained a reference to the backing instance of the input box. When the button is clicked, the input box gains focus.
We can also use the `getDOMNode()` method to get the DOM element.
* * *
### Creating Refs
React provides the `React.createRef` method to create refs.
## Example
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component{
constructor(props){
super(props);
this.myRef= React.createRef();
}
componentDidMount(){
this.myRef.current.focus();
}
render(){
return;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Callback Refs
Another way to create refs is by using a callback function. This approach was common before React 16.3, but now using `React.createRef` is recommended.
## Example
class MyComponent extends React.Component{
constructor(props){
super(props);
this.setMyRef= element =>{
this.myRef= element;
};
}
componentDidMount(){
if(this.myRef){
this.myRef.focus();
}
}
render(){
return;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Using Refs to Access DOM Elements
Refs allow you to directly access and manipulate DOM elements.
## Example
class MyComponent extends React.Component{
constructor(props){
super(props);
this.myRef= React.createRef();
}
handleClick =()=>{
this.myRef.current.style.backgroundColor='yellow';
};
render(){
return(
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Using Refs to Access Child Component Instances
Refs can also be used to access instance methods or properties of child components.
## Example
class ChildComponent extends React.Component{
focusInput =()=>{
this.inputRef.current.focus();
};
constructor(props){
super(props);
this.inputRef= React.createRef();
}
render(){
return;
}
}
class ParentComponent extends React.Component{
constructor(props){
super(props);
this.childRef= React.createRef();
}
handleClick =()=>{
this.childRef.current.focusInput();
};
render(){
return(
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Using the useRef Hook (Function Components)
In function components, you can use the `useRef` Hook to create refs.
## Example
import React,{ useRef } from 'react';
import ReactDOM from 'react-dom';
const MyComponent =()=>{
const inputRef = useRef(null);
const handleClick =()=>{
inputRef.current.focus();
};
return(
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Summary
* **Creating Refs**: Use `React.createRef` in class components and the `useRef` Hook in function components.
* **Accessing DOM Elements**: Directly access and manipulate DOM elements via refs.
* **Accessing Child Component Instances**: Access instance methods or properties of child components via refs.
* **Customizing Exposed Instance Values**: Use `useImperativeHandle` and `forwardRef` to customize the instance values that child components expose to parent components.
* **Refs in Concurrent Mode**: Refs continue to work normally in concurrent mode and can be used in conjunction with concurrent mode-related Hooks like `useTransition`.