React: Hooks - useRef

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 的優點：

1. 可儲存參照值(類似class component的instance properties)
2. 參照值改變不會有額外的re-render
3. 即使其他state變數改變 rerender component，還是能儲存參照值
   

---

References

• React Hooks Tutorial - 28 - useRef Hook Part 1 @Codevolution
• React Hooks Tutorial - 29 - useRef Hook Part 2 @Codevolution
• A complete guide to React refs
• useRef @React Docs
• Refs and the DOM @React Docs
• Forwarding Refs @React Docs
• 【React教學】一個範例讓你搞懂useState, useRef, useEffect | 5分鐘快速教學 @走歪的工程師James