State without an update
The ref created via useRef can be used to hold not only a DOM instance but also any value. At any time, we can change its current property with a new assignment:
ref.current = ...
The assignment can be a JavaScript expression. What's special about this is that the ref assignment doesn't do anything more than an assignment. This implies that it does not trigger an update. Let's take a look at how it impacts the UI when we wire it to a user action:
const Title = () => {
const ref = useRef(null)
const onClick = () => {
ref.current = 'white'
}
return <Child color={ref} onClick={onClick} />
}
In the preceding code, an event handler is wired with the Child component, and when the user clicks, it assigns a color into ref.current. It looks pretty similar to the case using a useState hook. If we were using a useState hook, the code would...