在React中最常用也最彈性的Hook就是useRef，用法如下，他回傳的是一個物件，裡面有一個屬性current

const data = useRef(*初始值*)
console.log(data)
// { current: "*初始值*" }

其中他有兩大用途

1. 保存不需要觸發 re-render 的資料
2. 保存 DOM 節點

使用情境-保存不需要觸發 re-render 的資料

套用先前學的hook，使用useState讓input內的內容在更動時影響下方文字，做完後突然想知道打名字的過程中到底render幾次?

function App(){
  const [name,setName] = useState('')
  return(
    <>
      <input value={name} onChange={e=>setName(e.target.value)}/>
      <div>My name is {name}</div>
    </>
  )
}

於是創一個新的renderCount的useState紀錄每次render次數，看起來好像邏輯很對，但是這樣的做法是有問題的! 會使setRenderount進入無限迴圈。

function App(){
  const [name,setName] = useState('')
  const [renderCount, setRenderount]=useState(0)
  useEffect(()=>{
    setRenderount(prevRenderCount=>prevRenderCount+1)
  })
  return(
    <>
      <input value={name} onChange={e=>setName(e.target.value)}/>
      <div>My name is {name}</div>
      <div> I render {renderCount} times</div>
    </>
  )
}

useState在這邊是行不通的，那麼就來用用看useRef，useRef保存了原先的值，在不重新render下累加值

function App(){
  const [name,setName]=useState('')
  const renderCount=useRef(1)
   useEffect(()=>{
	   renderCount.current = renderCount.current +1
  })
  return(
    <>
      <input value={name} onChange={e=>setName(e.target.value)}/>
      <div>My name is {name}</div>
      <div> I render {renderCount.current} times</div>
    </>
  )
}

這裡有範例可以操作看看，明天再接下去說明第二個使用情境。