Difference between useRef and createRef in ReactJS
Last Updated :
07 Nov, 2023
The useRef is a hook used in functional components introduced in the React version 16.8 while createRef is a react method used in React class component, both are used to create a reference to the React Elements
Prerequisites:
A ref is defined as any value that does not trigger a component re-render when it is changed. This behavior is contrary to the function of states and props. A ref can be created in two ways- by the useRef hook or by the createRef function.
The useRef is a hook that uses the same ref throughout. It saves its value between re-renders in a functional component and doesn’t create a new instance of the ref for every re-render. It persists the existing ref between re-renders.
The createRef is a function that creates a new ref every time. Unlike the useRef, it does not save its value between re-renders, instead creates a new instance of the ref for every re-render. Thus implying that it does not persist the existing ref between re-renders.
Let’s look at an example to understand the differences more clearly.
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app react-ref
Step 2: After creating your project folder i.e. react-ref, move to it using the following command:
cd react-ref
Project Structure:
Example 1: This example use useRef hook to create reference to a component
Javascript
import React, { useEffect, useRef, useState } from "react" ;
export default function App() {
const [counter, setCounter] = useState(0);
const ref = useRef();
useEffect(() => {
ref.current = "GeeksforGeeeks" ;
}, []);
useEffect(() => {
console.log(counter, ref.current);
}, [counter]);
return (
<div
style={{
backgroundColor: "green" ,
height: "100vh" ,
padding: "50px" ,
}}
>
<h3>Example on useRef</h3>
<button
onClick={() => setCounter((c) => c + 1)}
>
Increment
</button>
<h5>Counter Value: {counter}</h5>{ " " }
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Explanation: Since the useRef persists the ref value on re-renders, we can see the ref.current value on every re-render.
Example 2: This example uses createRef method to create reference to react element
JavaScript
import React, {
useEffect,
createRef,
useState,
} from "react" ;
import "./App.css" ;
export default function App() {
const [counter, setCounter] = useState(0);
const ref = createRef();
useEffect(() => {
ref.current = "GeeksforGeeeks" ;
}, []);
useEffect(() => {
console.log(counter, ref.current);
}, [counter]);
return (
<div
style={{
backgroundColor: "green" ,
height: "100vh" ,
padding: "50px" ,
}}
>
<h3>Example on createRef</h3>
<button
onClick={() => setCounter((c) => c + 1)}
>
Increment
</button>
<h5>Counter Value: {counter}</h5>{ " " }
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Explanation: Since the createRef doesn’t persist the ref value on re-renders, we can see the ref.current value only once.
Difference between useRef and CreateRef :
It is a hook. |
It is a function. |
It uses the same ref throughout. |
It creates a new ref every time. |
It saves its value between re-renders in a functional component. |
It creates a new ref for every re-render. |
It persists the existing ref between re-renders. |
It does not persist the existing ref between re-renders. |
It returns a mutable ref object. |
It returns a read-only ref object. |
The refs created using the useRef can persist for the entire component lifetime. |
The refs created using the createRef can be referenced throughout the component. |
It is used in functional components. |
It is used in class components. It can also be used in functional components but might show inconsistencies. |
Share your thoughts in the comments
Please Login to comment...