useRef 可以直接用來 修改DOM節點屬性 和 儲存可變值(mutable value)；更棒的是，使用 useRef 不僅會hold住參照值，也不會造成額外的render。
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.
這邊跟著影片範例實作兩種使用 useRef 的常用時機：(1) 直接存取DOM節點（<Focus/>）; (2) 儲存可變值 (<ClassTimer/> vs <HookTimer/>)。
在儲存可變值的範例中，使用Function component 遇到的問題是，當變數是在 useEffect 裡宣告，就沒辦法在函數以外存取這個值，這時可以使用 useRef 來解決這個問題，另外還能在每次 state 改變，也就是 timer 改變造成rerender時保存值。
另外也推薦一位YT工程師James五分鐘解釋useRef和useState的短片也把useRef和useState差異講的非常好。
最後整理一下使用 useRef 的優點：
- 可儲存參照值(類似class component的instance properties)
- 參照值改變不會有額外的re-render
- 即使其他state變數改變 rerender component，還是能儲存參照值
References
