Prerequisite: Basic knowledge about React and Refs and the dom in React
This post is going to talk about what is useRef hook and when we can use it. If you wonder why you should use Hooks, Why React Hooks Part I and Part II are just the right places for you
The first time I learned Hooks, I have so many questions that I need to look for the answers. One of those questions is how I can compare the current state/props with the previous one or handle deep object comparison in useEffect hook. I would only figure it out when I learned about useRef hook then every pieces fall into place.
💪 Let’s get started!
1. What is useRef Hook?
Refs provide a way to access DOM nodes or React elements created in the render method.
Our example is about managing the focus of an input when the user clicks on the button. To do that, we will use the createRef API
• createRef API
import {createRef} from 'react'
const FocusInput = () => {
const inputEl = createRef()
const focusInput = () => {
inputEl.current.focus()
}
return (
<>
<input ref={inputEl} type="text" />
<button onClick={focusInput}>Focus input</button>
</div>
)
}We can achieve exactly the same result with useRef hook
• useRef Hook
const FocusInput = () => {
const inputEl = React.useRef()
const focusInput = () => {
inputEl.current.focus()
}
return (
<>
<input ref={inputEl} type="text" />
<button onClick={focusInput}>Focus input</button>
</>
)
}🤔 Wait! What’s the difference?
I asked the same question when I first read about useRef. Why do we need to use useRef hook when we can use createRef API to manage the focus of an input? Does the React team just want to make the code look consistent by creating a doppelganger when they introduced Hooks in React 16.8?
Well, the difference is that createRef will return a new ref on every render while useRef will return the same ref each time.
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
const Test = () => {
const [renderIndex, setRenderIndex] = React.useState(1)
const refFromUseRef = React.useRef()
const refFromCreateRef = createRef()
if (!refFromUseRef.current) {
refFromUseRef.current = renderIndex
}
if (!refFromCreateRef.current) {
refFromCreateRef.current = renderIndex
}
return (
<>
<p>Current render index: {renderIndex}</p>
<p>
<b>refFromUseRef</b> value: {refFromUseRef.current}
</p>
<p>
<b>refFromCreateRef</b> value:{refFromCreateRef.current}
</p>
<button onClick={() => setRenderIndex(prev => prev + 1)}>
Cause re-render
</button>
</>
)
}As you can see, refFromUseRef persists its value even when the component rerenders while refFromCreateRef does not
> You can find this comparation of useRef and createRef in Ryan Cogswell’s answer on stackoverflow
👏 Interesting! useRef can hold a value in its .current property and it can persist after the component rerenders. Therefore, useRef is useful more than just managing the component ref
2. Beyond the Ref attribute
Apart from the ref attribute, we can use useRef hook to make a custom comparison instead of using the default shallow comparison in useEffect hook. Take a look at our example 😇
const Profile = () => {
const [user, setUser] = React.useState({name: 'Alex', weight: 40})
React.useEffect(() => {
console.log('You need to do exercise!')
}, [user])
const gainWeight = () => {
const newWeight = Math.random() >= 0.5 ? user.weight : user.weight + 1
setUser(user => ({...user, weight: newWeight}))
}
return (
<>
<p>Current weight: {user.weight}</p>
<button onClick={gainWeight}>Eat burger</button>
</>
)
}
export default ProfileProvided that the user’s name will always unchanged. Our expectation is that the effect will output the warning text only when the user has gained weight. However, if you test the code above, you can see that our effect runs every time the user clicks on the button, even when the weight property stays the same. That is because useEffect Hook uses shallow comparison by default while our userState is an object. 🐛🐛🐛
🔧 To fix this bug, we need to write our own comparison instead of using the default one.
👉 Step 1: use lodash isEqual method for deep comparison
const Profile = () => {
const [user, setUser] = React.useState({name: 'Alex', weight: 40})
React.useEffect(() => {
if (!_.isEqual(previousUser, user) {
console.log('You need to do exercise!')
}
})
...
}
export default ProfileWe have just removed the dependency array in our effect and use the lodash isEqual method instead to make a deep comparison. Unfortunately, we run into a new issue because of the missing previousUser value. If we do the same thing with a class component in ComponentDidUpdate lifecycle, we can easily have the previous state value.
🔥 useRef comes to rescue
👉 Step 2: useRef for saving the previous state
const Profile = () => {
const [user, setUser] = React.useState({name: 'Alex', weight: 20})
React.useEffect(() => {
const previousUser = previousUserRef.current
if (!_.isEqual(previousUser, user) {
console.log('You need to do exercise!')
}
})
const previousUserRef = React.useRef()
React.useEffect(() => {
previousUserRef.current = user
})
...
}
export default ProfileTo keep track of the previousUser value, we save it to the .current property of useRef hook because it can survive even when the component rerenders. To do that another effect will be used to update the previousUserRef.current value after every renders. Finally, we can extract the previousUser value from previousUserRef.current, then we deep compare the previous value with the new one to make sure our effect only run when those values are different
👉 Step 3: extract effects to the custom Hooks
If you want to reuse the code, we can make a new custom hook. I just extract the code above to a function called usePrevious
const usePrevious = (value) => {
const previousUserRef = React.useRef()
React.useEffect(() => {
previousUserRef.current = value
}, [value])
return previousUserRef.current
}And to make it more generic, I will rename previousUserRef to ref
const usePrevious = (value) => {
const ref = React.useRef()
React.useEffect(() => {
ref.current = value
}, [value])
return ref.current
}Let’s apply our custom usePrevious hook to the code
const Profile = () => {
const initialValue = {name: 'Alex', weight: 20}
const [user, setUser] = React.useState(initialValue)
const previousUser = usePrevious(user)
React.useEffect(() => {
if (!_.isEqual(previousUser, user) {
console.log('You need to do exercise!')
}
})
const gainWeight = () => {
const newWeight = Math.random() >= 0.5 ? user.weight : user.weight + 1
setUser(user => ({...user, weight: newWeight}))
}
return (
<>
<p>Current weight: {user.weight}</p>
<button onClick={gainWeight}>Eat burger</button>
</>
)
}
export default Profile💪 How cool is that! You can also extract the deep comparison logic to a new custom Hook too. Check out use-deep-compare-effect by Kent C. Dodds
3. Conclusion:
🚀 useRef Hook is more than just to manage DOM ref and it is definitely not createRef doppelganger. useRef can persist a value for a full lifetime of the component. However, note that the component will not rerender when the current value of useRef changes, if you want that effect, use useState hook instead 👏👏👏
Here are some good resources for you:
• Reacts createRef API
• React useRef documentation
• Handle Deep Object Comparison in React’s useEffect hook
🙏 💪 Thanks for reading!
I would love to hear your ideas and feedback. Feel free to comment below!
