Takeaway

• useEffect的”Effect”是副作用
• 使用useEffect呼叫api時，可以加上布林判斷let ignore = false結合if (!ignore)，避免資料回傳速度不一致所造成的競態條件
• 事件處理函數的邏輯是非響應，除非有互動
• useEffectEvent：用來處理Effect裡不想要產生響應的邏輯
• 在useEffect裡調用Effect Event：Effect Event()
• 不要把Effect Event傳給其他組件或Hook
• Eslint有可能會抑制React原生的檢查工具
• 將靜態、不會變的東西移到組件外；將動態的東西移到Effect內
• 如果擔心各自獨立的useEffect太重複，可把共通邏輯寫到自訂的Hook
• 自訂Hook共享的是邏輯，想要共享State請用狀態提升
• 自訂Hook的好處：讓資訊流更容易看清，譬如useData(url)就像是輸入url會輸出data；如果自訂Hook裡的Effect想升級成更好用的功能（例如useSyncExternalStore），也不需要動到組件
• higher order components VS render props VS custom hook：三者都想複用邏輯
• 高階組件（HOC）：傳入一個組件，這個函數（HOC）會回傳被包裝的新組件，例如Redux的connect()。適合搭配條件渲染，缺點是一個組件裡只能用一次HOC，以及使用太多層的話會引起Wrapper Hell
• Render Props：把函式放在props裡傳遞，而那個函式會渲染元素，因此得名。容易嵌套太深