How to use React Ref
Tags: react, abotwrotethis, frontend
Published: 2023-04-22 06:12:03

If you're working with React, you've likely run into situations where you need to access and manipulate the properties of a DOM element.

One way to do this is to use the `ref` property to create a reference to the element, which you can then access using the `current` property.

In this blog post, we'll explore how to use React ref to access and manipulate DOM elements in your React applications.

## What is React Ref?

React Ref is a feature in React that allows you to access and manipulate the properties of a DOM element in your React application.

Using Ref, you can create a reference to a DOM element, which is then stored in a special `ref` object. You can then access properties of the element using the `current` property of the `ref` object.

For example, you might use React ref to access the value of an input field, manipulate the text of a paragraph, or calculate the height of a div element.

## Creating a Ref

To create a Ref in React, you use the `React.createRef()` method. This method returns an empty `ref` object that you can attach to a DOM element.

Here's an example of how to create a Ref in React:

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}
```

In this example, we create a Ref using the `React.createRef()` method, and then attach it to a div element using the `ref` property.

## Accessing the Ref

Once you've created a Ref, you can access it using the `current` property. This property contains a reference to the DOM element that the Ref is attached to.

Here's an example of how to access a Ref in React:

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  componentDidMount() {
    console.log(this.myRef.current);
  }
  
  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}
```

In this example, we access the Ref using the `current` property in the `componentDidMount` lifecycle method. This method is called once the component has mounted, and the Ref will be available to use at this point.

## Manipulating the Ref

Once you've accessed a Ref, you can manipulate the properties of the associated DOM element using standard JavaScript DOM APIs.

Here's an example of how to manipulate a Ref in React:

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  componentDidMount() {
    this.myRef.current.style.backgroundColor = "red";
  }
  
  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}
```

In this example, we manipulate the `backgroundColor` property of the Ref using the `style` property of the associated DOM element.

## Other Ways to Use Ref

In addition to using Ref to access and manipulate DOM elements, there are other ways you can use Ref in your React applications.

### Refs and Functional Components

If you're using functional components in your React application, you can use the `useRef` hook to create a Ref.

Here's an example of how to use the `useRef` hook in a functional component:

```jsx
function MyComponent() {
  const myRef = React.useRef();

  React.useEffect(() => {
    console.log(myRef.current);
  }, []);

  return <div ref={myRef}>Hello, world!</div>;
}
```

In this example, we use the `useRef` hook to create a Ref, and then access it using the `current` property inside the `useEffect` hook.

### Refs and Forwarding Refs

For more complex components that have child components, you may need to access the Refs of child components from the parent component.

To do this, you can use a technique called "forwarding refs", where you pass the Ref down to the child component as a prop.

Here's an example of how to use forwarding refs in your React application:

```jsx
const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>Hello, world!</div>;
});

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current);
  }

  render() {
    return <ChildComponent ref={this.myRef} />;
  }
}
```

In this example, we use the `React.forwardRef` method to create a child component that can forward its Ref to its parent.

We then create a Ref in the parent component, and pass it down to the child component using the `ref` prop. Finally, we access the Ref in the parent component's `componentDidMount` method.

## Conclusion

The React Ref feature allows you to access and manipulate the properties of a DOM element in your React application.

To create a Ref, use the `React.createRef()` method, and attach it to a DOM element using the `ref` property.

Once you've created a Ref, you can access it using the `current` property, and manipulate the associated DOM element using standard JavaScript DOM APIs.

There are also other ways to use Ref in your React applications, including the `useRef` hook for functional components and forwarding refs for more complex components.