React 官方文件中，有條規則明確寫著 "Only call Hooks at the top level"，延伸來說有不少使用 Hooks 的注意事項，例如：不要在 if/else conditions 或 loop 中使用 Hooks。然而，為什麼不能在 conditions, loop 等等情況中呼叫 Hooks 呢？這背後其實與 React Hooks 的資料結構有關，本文將試著閱讀 React Hooks 原始碼來探討這項規則的原因。
在 React Hook 中，處理 Side Effect 最重要的 API 莫過於 useEffect。本文將探討 useEffect 在實務應用的兩大場景「資料獲取 (Data Fetching)」以及「訂閱/取消訂閱外部事件或資源」時，該如何處理才會是相對合理正確的方式，藉此更理解 useEffect 的使用方式。其中也會牽涉到 useEffect 的 dependence 以及 cleanup 運作囉。
隨著 React-Redux 版本提升，官方更建議使用 Hooks 的方式，而非過去的 HOC 模式 e.g.`connect`。在本文中，將探討這樣的轉變有什麼好處，以及理解和實作 React-Redux 最重要的 useSelector 和 useDispatch Hooks。
在前端世界中，不常見到單獨使用 Redux，而是 React 與 Redux 共同使用，aka React-Redux。因此在本文中，會探討 React-Redux 的核心部分的實踐，主要聚焦於 Provider 元件與 connect 方法。
在寫 React 時，總是非常順手地使用 JSX 語法，然而用久了總會思考到：究竟 JSX 被編譯後結果為何？背後的 Raw API 為何？JSX 有什麼特色？這些疑問都會在文中探討！