Understanding the Key Differences Between useRef and createRef
Written on
Chapter 1: Introduction to Refs in React
In React components, developers can utilize either the useRef hook or the createRef function to establish a reference (ref). A ref is a special value that, unlike states and props, does not cause the component to re-render when it changes. This article will delve into the differences between the useRef hook and the createRef function in React components.
Section 1.1: Exploring useRef and createRef
The primary distinction between the useRef hook and createRef function lies in their behavior during re-renders. The useRef hook maintains its value across re-renders in function components, while createRef generates a new ref with each render.
For example, consider the following code using createRef:
import React, { createRef, useEffect, useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
const ref = createRef();
useEffect(() => {
ref.current = "foo";}, []);
useEffect(() => {
console.log(count, ref.current);}, [count]);
return (
<div className="App">
<button onClick={() => setCount((c) => c + 1)}>increment</button>
<p>{count}</p>
</div>
);
}
Here, we establish a ref using createRef and only assign ref.current during the initial render. Triggering a re-render occurs when the button is clicked to update the count state. The console output from the useEffect callback reveals that ref.current logs 'foo' during the first render, but it becomes null in subsequent renders.
Subsection 1.1.1: Switching to useRef
Conversely, when we implement the useRef hook, the code changes slightly:
import React, { useEffect, useRef, useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
const ref = useRef();
useEffect(() => {
ref.current = "foo";}, []);
useEffect(() => {
console.log(count, ref.current);}, [count]);
return (
<div className="App">
<button onClick={() => setCount((c) => c + 1)}>increment</button>
<p>{count}</p>
</div>
);
}
In this scenario, we use the useRef hook to create a ref and set ref.current similarly to the previous example. The key difference is that after each render, ref.current retains the value 'foo'. This indicates that in function components, the useRef hook allows us to maintain a value across re-renders without triggering a re-render when it changes.
Section 1.2: Conclusion
In summary, the main difference between createRef and useRef is that createRef generates a new ref during each render of function components. In contrast, a ref created with useRef preserves its value after each render in a function component.
Chapter 2: Additional Resources
To further enhance your understanding of React refs, check out the following videos:
This video titled "React useRef Hook | createRef v/s useRef" provides a comprehensive overview of the useRef hook versus createRef, covering their functionalities and best practices.
In this video, "React Refs and createRef," you'll find an in-depth discussion on refs in React, including practical examples and usage scenarios.
For more insights, visit plainenglish.io and subscribe to our free weekly newsletter for exclusive writing opportunities and community advice on Discord.