# React useRef
useRef是react中的一個hook，功能上來說與useState很相似，都是用來存放變數的hook。其中一個最大的差別是useState在更新時會使網也重新render，而useRef卻不會。

**常見用途:**
1. 單純存變數，改變時不重新渲染。
2. useRef也常被用來選取HTML的DOM元素，取代document query。
3. 用來儲存前一個State內容。

## `1.建立useRef`

import { useRef } from 'react';

const obj = useRef(0);

在建立useRef時，要在()內輸入起始值，以上面範例來說是0。而useRef會回傳一個物件如下:

obj = { current: 0 };

## `2.取出&修改數值`
由上面範例可知這是一個object，所以可以直接用key value呼叫:

console.log(obj.current);

修改數值(ex.將原數值加一):

obj.current = obj.current + 1 ;

## `3.選取HTML的DOM元素`
首先建立一個ref物件

import { useRef } from 'react';

const inputRef = useRef();

在要選取的DOM元素中加入ref屬性，並指派為剛才建立的ref物件

<input ref={inputRef} />

如此一來，inputRef.current就會等於上面的input元素，可以用來去做後續的操作。

## `4.儲存前一個State`
直接看範例:
首先建立state & ref

import { useState, useRef, useEffect } from 'react';

const [someState, setSomeState] = useState('');
const preState = useRef();

建立useEffect來在state改變時更新ref

useEffect(()=>{
    preState.current = someState;
},[someState])