Takeaway

• useEffect的前身是生命週期函數componentDidMount、 componentWillUnmount和componentDidUpdate
• useEffect讓函式組件（Functional Component）也能有自己的生命周期
• useMemo：可以儲存複雜的計算結果
• 可以使用console.time + console.timeEnd了解計算的耗時程度
• 在props發生變化時調整部分頁面（譬如可勾選的列表）：用陣列方法直接調整回傳的props最高效，而不是用useEffect或改state
• Effect只用來執行「組件一顯示時就要執行」的程式碼，否則有其他互動的話就是事件處理的邏輯了
• 如果是想讓state的變化被父組件得知：可用狀態提升
• 如果想要訂閱外部儲存（如Redux Store、瀏覽器API等）：更適合用專門的useSyncExternalStore
• 比起掛載和卸載，Effect的生命週期更接近多次開始和停止同步
• 每次渲染時都會有各自對應的Effect。而且由於函式組件的閉包特性，這些Effect的值各自都是不變的（immutable）
• 每個useEffect都該是各自獨立的
• ref.current不能拿來當依賴項：因為ref的特質就是更改也不會重渲染
• React的程式碼檢查工具會提示React Hook useEffect has missing dependencies
• useLayoutEffect：只有執行時機不同於useEffect，瀏覽器會先執行程式再重繪頁面。雖然可以讓畫面不會發生惱人的閃爍，但可能拖累效能，建議在特殊狀況下使用
• useEffect可以用來抓API，但React官方推出的Suspense組件更加適合