115-BIRC 前端群 暑期作業

1 min read H.Y. Chen

寫一個文件關於，useState 和UseEffect，不管是教學這兩個hook如何使用又或者是用這兩個hook寫了個小專題的專題文件都可以!

(建議以Hack MD完成，練習Markdown語法)

方案 A：教學文件

不要只是說明和解釋，要能「用自己的話把複雜觀念講清楚」。

【作業目標】

請撰寫一篇技術教學文件（格式可為 Markdown, Notion 或 Medium 文章），深入淺出地向 React 初學者解釋 useState 與 useEffect 的運作機制與常見陷阱。

【須包含】

  1. useState
    • 為什麼我們不能直接用全域變數或局部變數來儲存狀態？
    • 狀態更新的「非同步性（Batching）」：解釋為什麼在 setCount(count + 1) 之後立刻 console.log(count) 拿不到最新的值？
  2. useEffect
    • 什麼是「副作用（Side Effects）」？為什麼資料抓取、訂閱事件、手動變更 DOM 需要放在這裡？
    • 依賴陣列（Dependency Array） 的精準控制：
      • 不傳傳入值（undefined）
      • 空陣列（[]）
      • 帶有變數的陣列（[dep1, dep2]）
      • 以上三種情境的執行時機有何不同？
    • 清除函式（Cleanup Function） 的重要性：什麼時候會觸發？為什麼沒寫可能會導致記憶體洩漏（Memory Leak）？
  3. 常見錯誤範例
    • 請至少列舉出 2 個初學者最容易犯的錯誤（例如：useEffect 忘記寫依賴陣列導致無限迴圈、忘記清除 setInterval 等），並提供錯誤程式碼與重構後的正確程式碼對比。

方案 B：專案開發文件

結合兩個 Hook 寫出一個完整的互動功能，並學習撰寫標準的「專案開發文件」。

【作業目標】

請利用 React (useState + useEffect) 獨立開發一個小專案，並撰寫一份完整的開發規格文件。

【須包含】

  1. 架構與資料流說明
    • 說明你的元件結構，以及資料是如何透過 State 驅動畫面更新的。
  2. Hook 設計脈絡
    • 具體說明你把哪些資料定義成了 State？為什麼？
    • 你的 useEffect 監聽了哪些依賴變數？在什麼時間點會觸發？
  3. 亮點與挑戰
    • 在開發過程中遇到了什麼困難？（例如：如何避免重複發送 API 請求、如何處理 Race Condition 等）你是如何解決的？

其他事項

使用TS、 next.js（ App Route又或者是page Route都可以）

文件撰寫編譯語言可以參考：

Markdown、Mermaid 與 LaTeX

寫程式只是工程師的一半工作，另一半是讓別人看懂你的程式。這份作業的重點不只是功能動得起來，更重要的是你在文件裡展現的思考脈絡！！