What's the difference between `useRef` and `createRef`?

What’s the difference between useRef and createRef?

When working with React and JavaScript, you may come across the useRef and createRef methods. While they both allow you to reference elements in your application, there are some key differences between the two. In this article, we’ll explore the differences and use cases for each method.

createRef

The createRef method is used to create a ref object that can be attached to a React element. This method is commonly used in class components, where you can create an instance variable and assign it to the ref object.

Here’s an example:


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

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

In the above example, we create a ref object using createRef and assign it to the instance variable this.myRef. We then use this ref object to focus on the input element when the component mounts.

useRef

The useRef method is a hook that allows you to create a mutable ref object. This method is commonly used in functional components, where you can use the useRef hook to create a ref object and access it throughout the component’s lifecycle.

Here’s an example:


import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return ;
}

In the above example, we use the useRef hook to create a ref object and assign it to the variable myRef. We then use this ref object to focus on the input element when the component mounts, using the useEffect hook.

Key Differences

Now that we’ve seen examples of both createRef and useRef, let’s summarize the key differences:

Usage: createRef is used in class components, while useRef is used in functional components with hooks.
Mutability: The ref object created using createRef is mutable and can be reassigned, while the ref object created using useRef is immutable.
Accessing the ref: In class components, you access the ref object using this.myRef.current, while in functional components, you access it using myRef.current.

It’s important to choose the appropriate method based on your component’s needs. If you’re working with class components, createRef is the way to go. If you’re using functional components with hooks, useRef is the recommended approach.

That’s it! Now you know the difference between useRef and createRef. Choose the method that best fits your component’s requirements and happy coding!

What’s the difference between `useRef` and `createRef`?