開發時不要預想用 useEffect 處理，但如果 code 難以閱讀、管理，或是要避免每次 update 都執行的 function，那才來考慮使用 useEffect。

React 有提到 state 的更新，都必須要是 immutable，當你有使用到 useState 或是 pureComponent、shouldComponentUpdate，你就會發現問題。

會以 Puppeteer 在 react 專案上跑 End to End Test。puppeteer 是由 Chrome DevTools team 團隊開發的，它是一個 node library 工具，提供 API 讓我們控制 chrome 或 Chromium，模擬執行各種功能。

redux 核心流程 dispatch action => reducer => store，當你用 redux 運行多個 dispatch 時，每一個 dispatch 都會獨立更新下去的，如果你的更新資料又彼此關聯，就可能會發生錯誤。

單元測試在我剛寫程式時，認為測試 case 是自己預期的，還主觀的認為沒什麼用。但我在實際寫幾個測試後，能更專注在預期判斷 input output，也有助於你思考 function 架構更清楚。接下來就來針對 react hooks 做 component testing。

React為了解決props 需要傳很多層問題，就在v16.3 更新 context API 的功能，context API 主要功能就是跨元件傳遞資料。利用createContext 建立context，並搭配Provider、Consumer、contexttype、usecontext 跨元件取值。

React發布了幾個月的Hooks，最近也開始嘗試接觸，後面會稍微提一下PureComponent，不會介紹hooks各種特殊用法，就只針對hooks performance優化做介紹。

不使用next.js，來試著依靠原生方法，架構出React server-side render，會使用到react官方的cli create-react-app，以及node.js作為server。

前陣子公司專案從next3更新到7、react也從15更新到16，希望能加快開發或佈署的速度，順便分享一下踩到了哪些的地雷。

React Portals 是非常酷炫的功能，能夠將元件向任意dom節點依附渲染，這邊會介紹兩個範例，頁面上渲染元件，還有渲染元件到window open上。

開發上用到React，而其中最重要的莫過於是生命週期lifeCycle，可以在每個元件渲染的過程，加入需要的處理，例如載入完元件後非同步抓取資料，更新props觸發處理事件等等。接下來介紹一下新版本的life Cycle。

介紹關於使用stateless component時，常會搭配使用的Higher Order Components，之前有看到「高階組件」這區塊，被他名字誤會了，實際上一點也不高階，他就只是一個function 函式，接受參數元件然後回傳全新元件，簡易的範例如下。