useRef vs createRef: Key Differences Every React Developer Should Know

Which one should you use—useRef or createRef?

React gives you two ways to reference DOM elements and component instances. Both useRef and createRef help you access and manage these references, but they work differently. Picking the right one can make your code cleaner and your app more responsive.

Let's break down the differences so you can choose the best approach for your React projects.

Understanding React Refs

In React, a ref (short for reference) provides a way to access DOM nodes or React elements created in the render method. Refs are commonly used for:

• Accessing DOM Elements: Directly interacting with a DOM element, such as focusing an input field.

• Storing Mutable Values: Keeping a mutable value that doesn't trigger a re-render when changed.

• Integrating with Third-Party Libraries: Managing interactions with non-React libraries that manipulate the DOM.

createRef in Class Components

The createRef function is used to create a ref object in class components. Each time createRef is called, it returns a new ref object.

Example of createRef in Class Components

Copy
1import React, { createRef, Component } from 'react';
2
3class MyComponent extends Component {
4  constructor(props) {
5    super(props);
6    this.inputRef = createRef();
7  }
8
9  focusInput = () => {
10    this.inputRef.current.focus();
11  };
12
13  render() {
14    return (
15      <div>
16        <input ref={this.inputRef} type="text" />
17        <button onClick={this.focusInput}>Focus Input</button>
18      </div>
19    );
20  }
21}
22
23export default MyComponent;

In this example, createRef is used to create a ref object assigned to this.inputRef. The focusInput method uses this ref to focus the input element when the button is clicked.

useRef in Function Components

With the introduction of hooks in React, the useRef hook allows function components to create refs. Unlike createRef, which creates a new ref on each render, useRef returns the same ref object on every render.

Example of useRef in Function Components

Copy
1import React, { useRef } from 'react';
2
3const MyFunctionComponent = () => {
4  const inputRef = useRef();
5
6  const focusInput = () => {
7    inputRef.current.focus();
8  };
9
10  return (
11    <div>
12      <input ref={inputRef} type="text" />
13      <button onClick={focusInput}>Focus Input</button>
14    </div>
15  );
16};
17
18export default MyFunctionComponent;

Here, useRef creates a ref object (inputRef) that persists across renders, allowing the focusInput function to focus the input element.

Key Differences Between useRef and createRef

Practical Considerations

• Managing Focus: When you need to programmatically focus an input element, using refs allows you to directly access the DOM node and call the focus method.

• Storing Mutable Values: Refs can hold any mutable value. For example, you can use a ref to keep track of the previous value of a prop or state without triggering a re-render.

• Callback Refs: As an alternative to createRef and useRef, callback refs offer more flexibility by allowing you to execute a function when a component mounts or unmounts.

Example of Callback Refs

Copy
1import React, { Component } from 'react';
2
3class MyComponent extends Component {
4  setInputRef = (element) => {
5    this.inputElement = element;
6  };
7
8  focusInput = () => {
9    if (this.inputElement) {
10      this.inputElement.focus();
11    }
12  };
13
14  render() {
15    return (
16      <div>
17        <input ref={this.setInputRef} type="text" />
18        <button onClick={this.focusInput}>Focus Input</button>
19      </div>
20    );
21  }
22}
23
24export default MyComponent;

In this example, setInputRef is a callback ref that assigns the input DOM element to this.inputElement, allowing direct access to the DOM node.

The Bottom Line!

Understanding the differences between useRef vs. createRef is vital for effective React development. createRef is suitable for class components, creating a new ref object on each render, while useRef is ideal for function components, providing a persistent ref object across renders. By choosing the appropriate ref management method, you can enhance the functionality and reliability of your React components.