DEV Community

Coder
Coder

Posted on

How to use React Ref

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:

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

  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

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>;
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

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>;
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

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

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

  return <div ref={myRef}>Hello, world!</div>;
}
Enter fullscreen mode Exit fullscreen mode

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:

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} />;
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)