時間再倒轉回剛結訓之後，我接觸到 React Hook Form 這個套件，也是這個套件讓我再回頭複習 React 的 useState和 useRef。

不知道大家剛接觸 React 的時候，是怎麼寫表單功能的，我在職訓的專題就是用 useState 的方式刻一個小型表單，也就是每個表單輸入欄位都會綁定到 React 的 state，每當輸入發生變化時，更新相應的狀態。當時的我並沒有思考到，輸入時每一次的手起刀落，因為 state 改變，所以都會造成一次次畫面的重新渲染啊！一想到如果這個表單有更多的欄位需要填寫，我的臉直接風☆雲☆變☆色:

可想而知，這對效能是非常不友善的。
該怎麼辦呢？其實還不需要用到套件，因為基礎魔法的 useRef 就能解決這個問題：

怎麼說呢？
因為在 React 中，觸發重新渲染 (re-render) 的邏輯來自於「狀態 (state) 的改變」。
當我們呼叫 setState 時，React 會把元件標記為需要更新，接著比較新的 Virtual DOM 與舊的 Virtual DOM，最後再更新實際的 UI。

然而，useRef 並不屬於這套狀態驅動的流程。

例如：

const ref = useRef(0);

其實等同於

ref = {
  current: 0
}

useRef 在建立時，就已經把這個物件存到記憶體中的某個位置，並且在後續 re-render 中，React 會回傳 同一個物件的 reference。
所以當我們這樣寫：

ref.current = 1

只是修改了物件內部的屬性值，並沒有改變 ref 這個物件的記憶體位置。
因此 React 不會認為「狀態改變了」，自然也就不會觸發 re-render。

而這個就是 React Hook Form 的核心，每個 input 都有自己的 ref.current 存值，輸入時只改 current，不會讓表單 re-render。

今天就先這樣～明天我們再來看看安裝與使用吧！