Understanding useRef design
React provides a useRef hook to create a ref:
const Title = () => {
const ref = useRef(null)
return <h1 ref={ref}>Hello World</h1>
}
The useRef hook takes an initial value as its only input argument and returns a ref object, putting that initial value under the current property.
There's no additional data structure required for useRef, other than the basic fiber hook support:
Figure 8.2 – useRef design
Just like useState and useEffect uses state to store state and the effect, useRef uses state to store the ref. Next, let's take a look at how it's implemented.
The useRef hook follows a typical hook setup where it takes a path of either mountRef or updateRef, depending on whether the fiber is under mount or update via the isFiberMounting flag, as explained in Chapter 3, Hooking into React:
function useRef(initialValue) {
if (isFiberMounting) {...