前情提要

useRef是一個函式，跟useState一樣接收一個參數，作為變數初始值。
不過 useRef 只會回傳一個有 current屬性 的 Object 。當更新 current 值並不會觸發 re-render

const renderCount = useRef(0);
// renderCount ={ current: 0 }

應用情境

component 在 state 變化時會重新渲染，但當我有一些數值不想被重新渲染影響時我們就可以使用useRef
不過除了這些 useRef還有以下使用情境

1.計算 render 次數
2.綁定 DOM 來控制 DOM 身上的一些事件
3.設定previous 的 State，不過也可以透過 useState達到，以下會附上範例

小筆記：更新 useRef 是 side Effect 的行為，所以記得寫在 useEffect 或 event handler 裡面

直接講這麼多不如直接呈現範例吧

function App() {
  const renderCount = useRef(0);

  useEffect(() => {
    console.count("change state 次數");
    renderCount.current += 1;
  });

  return (
    <p>render 次數：{renderCount.current}</p>
  );
}

function App() {
  const inputRef = useRef();
  // 情景二：綁定 DOM
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}

function App() {
  const [counter, setCounter] = useState(0);
  const [prevCount, setPrevCount] = useState(counter);
  const previousValue = useRef('');
  
  useEffect(() => {
		// 情境三：用來記憶前值
    previousValue.current = counter
  }, [counter]);

  return (
    <div>
      <p>數字：點了 {counter} 次</p>
      <p>前一數值：{previousValue.current}</p>
      <p>前一數值state呈現：{prevCount}</p>
      <button
        onClick={() => {
          setCounter((counter) => counter + 1);
          setPrevCount(counter);
        }}
      >
        Click me !
      </button>
    </div>
  );
}

這邊奉上 codepen 以供參考