react custom hooks

透過5個好用的custom hooks了解react custom hooks的活用

在react 16.8新增了重要的hooks，有useState, useEffect, useReducer…等，讓原本的Function stateless的component瞬間活起來，不用再透過class component才能夠儲存和操作state，這次要介紹幾個自己常用的custom hooks，來看看hooks之間的互相組合搭配。

索引index

useToggle: 切換開關

useFetch: 把 fetch 包裝起來

useSelector: 處理select行為和狀態

useInternal: 做個計時器

useDelayCallback: 防止連點機制且晚一點再觸發

useToggle: 切換開關

儲存開關狀態，並提供切換開關的callback，僅單純用到useState來儲存toggle狀態

useFetch

將fetch的response存在state中，只要state有變化就渲染組件，並且多了loading的state，在fetch一開始就將其設為true，fetch完(成功or失敗)才把loading設為false。

用useFetch來方便管理fetch的資料處理，不用每次都重寫一遍。
備註: 範例使用JSONplaceholder的API

useSelector: 處理select行為和狀態

儲存select 的value ，並提供handleSelect的callback給組件使用，此useSelector的寫法支援多個select

useInternal: 做個計時器

在hook儲存和觸發interval相關的行為，並且能夠在計時完畢的那一刻觸發額外的callback，方便用來作為定時更新的API或其他行為的hook

useDelayCallback: 防止連點機制且晚一點再觸發

此hook內建timeout機制，在每一次觸發callback都會清除上一次的timeout的callback並新建一個timeout的callback，如果使用者沒有再次觸發下一個callback，該timeout才會成功觸發其中的callback。

例如timeout是500ms，在500ms之內的每一次觸發都會把上一次的callback清除掉，只會剩下最後一個callback