此篇為實作練習理解 use 系列概念，學習課程來源 Lidemy React hooks 版本，如有觀念不清楚，再請指正，謝謝。
Table of Contents
1. useEffect
2. useLayoutEffect
3. Custom Hooks
useEffect
- 每次渲染都有自己的 effect，發生於畫面 render 完成後執行
- 因 useState 是非同步，不是即時更新，useEffect 可以在 state 改變前後，去做事，更精確說法為清除上次 effect 前做事，執行渲染完成後，此時 為新的state，執行新 effect
總結：每次渲染都會清除上次 effect 後，此過程稱為 clean up function，接下來瀏覽器進行渲染畫面，執行新 effect
useLayoutEffect
先看個圖
在 Browser paints screen 之前會先執行 Run LayoutEffects
當你程式如下，會先執行 useState 預設值後，再執行 useEffect，因為是先讓畫面渲染後才執行 useEffect，所以會看到畫面閃一下出現『會閃一下後出現的文字』。
如果使用 useLayoutEffect 在畫面 paint 出來前會把 state 狀態完成後才渲染
Custom hooks
把管理不同元件的狀態抽離，讓畫面跟資料流一分為二，乾乾淨淨，因此，其他人可以用你的 hooks 控制相同狀態，但畫面可以設計的完全不一樣。
將 useCounter, useInput, useTitle 拆分出來，這樣後續要維護或修改可以更快找到位置，也可以共用邏輯。
將自己學習到的實作一遍，避免觀念像是老鼠愛大米，傻傻分不清楚的狀況發生，下一篇再來記錄自己學習 useContext 的過程。
Jamie 2021.08.01
