React MOC
用途：這張地圖串連了關於「React」的相關筆記，作為導航層。 上層：Frontend MOC
核心概念與原理
- React 的核心原理以及優勢
- [[[Review] React 開發者一定要知道的底層機制 — React Fiber Reconciler]]
- React 開發者一定要知道的底層機制 — React Fiber Reconciler - Starbugs Weekly 星巴哥技術專欄 - Medium
- 為什麼前端需要 Bundler ! 作用是什麼？
- 巢狀 Provider
Hooks 與狀態管理
- useLayoutEffect
- useLayoutEffect 1
- How to use useSyncExternalStore hook
- 用 key 強制 remount 切斷 stale state
- useI18n
- 獲取所有 key 的 union with react hook form
- Drawer Form 資料不更新的解決方案
- Drawer 未隨 context unmount 導致 stale form state 送錯 id
元件基礎 (Angular ↔ React 對照)
- Component
- Composing Components
- Conditional Rendering In Component
- Event Handling
- Foreach Render
- Property Binding
- Variables In Component
- @Input
- @output
Next.js / Remix / 路由
- Next JS
- Next JS 13 intercept route change
- Page Route UseRoute
- Hot to using Babel In NextJS
- Auto Create Breadcrumbs By File Structure
- Create New Route In Remix
- Remix Loader Function
- URL 就是你的狀態（Your URL is your state）
- Create Search Params
效能與 Core Web Vitals
- 前端效能優化及指標
- LCP (Largest Contentful Paint)
- CLS (Cumulative Layout Shift)
- FID (First Input Delay)
- INP (Interaction to Next Paint )
- Nivo Custom Layer 避免無限重新渲染
工具與生態
我的洞察
- IIFE 在 JSX 的效能影響
- SWR isLoading 早退擋住頁面 API + 一個 hook 兩套抓法
- useI18n 優化
- 五步驟 Layout 縮短在一個 SP 完成
- 將多個前端專案整合至 Monorepo 架構
- React 在 Wordpress 上實作 menu
- Slide In&Out between Components
- 註冊表分派 side effect（Registry + Strategy Handler）
- 共用能力 context 會隨副作用種類膨脹
- 用 reaction hook 讓副作用各自帶依賴